书的页数与评分的关系echarts scatter配置项内容和展示
配置项如下
var data = [
[
[126, 0],
[152, 7.5],
[216, 7.6],
[354, 7.2],
[232, 7.8],
[100, 0],
[120, 8.8],
[414, 8.4],
[364, 7],
[196, 8.3],
[147, 8.7],
[225, 7.9],
[261, 7.6],
[226, 7]
],
[
[271, 8.5],
[307, 0],
[256, 8.5],
[323, 7.6],
[375, 8],
[299, 6.9],
[352, 7.7],
[261, 9],
[128, 6.5],
[185, 7.8],
[183, 8.2],
[264, 8.1],
[348, 6.9],
[166, 7.6],
[221, 7.3],
[350, 8],
[292, 7.6],
[223, 7],
[108, 6.6],
[144, 6.9],
[380, 8.8],
[458, 6.8],
[324, 6.7],
[247, 8]
],
[
[398, 8.1],
[166, 0],
[268, 8.5],
[248, 9],
[244, 7.6],
[135, 7.5],
[277, 7.6],
[264, 8.4],
[314, 8.5],
[244, 7.9],
[337, 8.6],
[244, 6.5],
[474, 8.3],
[407, 6.7],
[125, 7.6],
[167, 7.2],
[126, 8],
[304, 7.2],
[123, 8.5],
[316, 7.7],
[298, 8.6],
[157, 8.4],
[661, 0],
[184, 7.7],
[281, 8.6],
[192, 6.8],
[310, 6.8],
[153, 7.5],
[276, 7.3],
[355, 8.4],
[158, 7.3],
[338, 8.5],
[272, 8.6],
[363, 0],
[345, 8.9],
[299, 8.7],
[224, 7],
[68, 0],
[356, 9.3],
[432, 7.2],
[192, 7.5],
[123, 7.5],
[149, 0],
[218, 0],
[416, 7.6],
[148, 7.7],
[250, 8.7],
[126, 7.8],
[264, 6.8],
[424, 8.8],
[248, 8.2],
[288, 9],
[154, 7.5],
[165, 6.9],
[272, 8.1],
[784, 6.9],
[86, 0],
[93, 7.1],
[186, 4.9],
[206, 9],
[159, 8.2],
[180, 8.2],
[128, 8.4],
[127, 8.9],
[159, 7.5],
[132, 7.6],
[234, 7.4],
[96, 8.7],
[262, 7.5],
[147, 8.5],
[328, 7],
[80, 8.9],
[320, 7.6],
[195, 8.4],
[264, 7.2],
[301, 0],
[320, 0],
[590, 7.8],
[830, 0],
[249, 0],
[256, 7.3],
[186, 8.7],
[768, 0],
[460, 7.9],
[270, 7.1],
[296, 7.6],
[354, 8.2]
],
[
[208, 8],
[276, 8.3],
[180, 8.1],
[208, 5.9],
[272, 8.1],
[228, 8.9],
[309, 8.5],
[311, 0],
[368, 8.6],
[155, 8.1],
[338, 9],
[248, 7.3],
[272, 9.6],
[334, 8],
[372, 7.2],
[215, 8],
[200, 8.9],
[244, 7.9],
[130, 8.9],
[440, 9.3],
[162, 0],
[296, 0],
[145, 8.1],
[256, 8.3],
[245, 9],
[232, 7.7],
[260, 8.7],
[251, 8.1],
[658, 8.7],
[302, 8.8],
[284, 8.6],
[168, 8.4],
[132, 8.4],
[387, 8.9],
[170, 9.1],
[180, 0],
[180, 7.8],
[223, 7.9],
[200, 8.1],
[155, 9.1],
[456, 7.2],
[144, 8.8],
[225, 8.4],
[192, 7.8],
[329, 7.8],
[242, 7.5],
[452, 8],
[479, 8.9],
[143, 8.2],
[467, 9.1],
[320, 8.9],
[300, 8],
[229, 7.9],
[265, 8.2],
[159, 7.5],
[291, 8.6],
[260, 7.7],
[190, 7.6],
[160, 8.3],
[279, 0],
[368, 8.9],
[399, 9],
[360, 8.6],
[284, 8.5],
[334, 7.3],
[83, 0],
[244, 8.3],
[248, 8],
[384, 8.3],
[272, 8.1],
[243, 7.6],
[208, 6.7],
[160, 7.5],
[152, 9],
[392, 8.3],
[264, 8.2],
[320, 7.2],
[258, 9.3],
[83, 9.2],
[258, 8.3],
[493, 9],
[252, 7.4],
[98, 9.2],
[252, 8.4],
[223, 7],
[280, 7.7],
[205, 8.2],
[191, 8.2],
[1516, 0],
[403, 8],
[260, 7.9],
[135, 0],
[174, 8.6],
[160, 7.6],
[268, 8],
[376, 8.5],
[141, 8.6],
[136, 8.4],
[128, 8.4],
[139, 7.3],
[144, 8.9],
[208, 8.3],
[152, 8.6],
[122, 7.2],
[246, 8.2],
[153, 9.3],
[244, 8],
[358, 8],
[344, 7.6],
[194, 9],
[235, 7.7],
[236, 8],
[325, 8],
[392, 8.4],
[613, 8.3],
[400, 9.2],
[291, 8],
[345, 8.9],
[291, 9.2],
[378, 8.5],
[304, 8.3],
[364, 8.4],
[264, 7.9],
[620, 8.3],
[469, 9.1],
[154, 7.3],
[181, 5.8],
[309, 7.7],
[448, 9],
[317, 9.1],
[328, 8.8],
[352, 8.9],
[525, 9],
[336, 7.8],
[547, 7.4],
[400, 7.2],
[637, 9.2]
],
[
[214, 9],
[279, 8.3],
[198, 8.7],
[350, 7.4],
[288, 9],
[20, 8.1],
[344, 8.2],
[264, 9],
[227, 8],
[256, 9],
[346, 8.8],
[256, 8.2],
[296, 8.9],
[310, 7.2],
[160, 8.7],
[344, 8.6],
[330, 8.2],
[316, 8.7],
[276, 8],
[325, 8.6],
[347, 8.6],
[38, 8],
[288, 8.2],
[479, 0],
[133, 8.3],
[252, 8.9],
[439, 8.8],
[201, 9.1],
[954, 8.9],
[255, 8.5],
[600, 9.3],
[346, 7.6],
[200, 8.7],
[185, 9.1],
[302, 8.8],
[300, 8.1],
[251, 8.9],
[255, 8],
[188, 8.6],
[359, 8.9],
[232, 8.8],
[384, 9.1],
[317, 8.6],
[328, 8.1],
[609, 9.5],
[902, 8.2],
[611, 8.5],
[352, 8.4],
[549, 0],
[1606, 9.5],
[968, 8],
[320, 8.4],
[535, 8.5],
[120, 7.9],
[118, 0],
[272, 7.9],
[554, 8.5],
[117, 7.9],
[379, 7.9],
[324, 7.6],
[351, 8.8],
[293, 0],
[160, 7.6],
[313, 7.9],
[377, 7.1],
[976, 9.3],
[944, 9.3],
[319, 9.4],
[361, 6.7],
[457, 0],
[201, 8.6],
[778, 9.1],
[263, 5.9],
[362, 8.8],
[792, 8],
[279, 8.1],
[210, 8.6],
[177, 7.6]
]
]
var nameNum = ['一', '二', '三', '四', '五'];
var series = data.map(function(d, i) {
return {
data: d,
type: 'scatter',
name: '我给' + nameNum[i] + '星',
itemStyle: {
normal: {
opacity: 0.3 + i * 0.2
},
emphasis: {
borderColor: '#D0648A',
borderWidth: 2,
opacity: 0.75
}
},
symbolSize: (5 - i) * 5 + 2,
markLine: {
data: [{
type: 'average',
valueIndex: 1
}, {
type: 'average',
valueIndex: 0
}]
}
}
});
option = {
title: {
text: '书的页数与评分的关系'
},
color: ['#9cece0', '#73d8c9', '#23c2aa', '#15a08b', '#0d6457'],
xAxis: {
max: 1000,
min: 0,
name: '页数',
axisLine: {
lineStyle: {
color: '#888'
}
}
},
yAxis: {
max: 10,
min: 0,
name: '豆瓣平均分',
axisLine: {
lineStyle: {
color: '#888'
}
}
},
grid: {
left: 80,
right: 40,
bottom: 100
},
dataZoom: [{
bottom: 40,
fillerColor: 'rgba(126, 224, 209, 0.2)',
borderColor: 'rgba(126, 224, 209, 0.75)',
handleStyle: {
color: '#23c2aa'
}
}, {
left: 20,
yAxisIndex: 0,
fillerColor: 'rgba(126, 224, 209, 0.2)',
borderColor: 'rgba(126, 224, 209, 0.75)',
handleStyle: {
color: '#23c2aa'
}
}],
series: series,
legend: {
left: 'center',
top: 'bottom',
data: ['我给一星', '我给二星', '我给三星', '我给四星', '我给五星']
}
};
截图如下
