scatterecharts category配置项内容和展示
scatter
配置项如下
const data = {
dataX: ["x轴", "x1", "x2", "x3", "x4", "x5", "x6", "x7", "x8", "x9", "x10", "x11", "x12", ""],
dataY: ["", "y12", "y11", "y10", "y9", "y8", "y7", "y6", "y5", "y4", "y3", "y2", "y1", "y轴"],
dataNum: [
[
0,
0,
0
],
[
1,
11,
7.3
],
[
1,
8,
15.2
],
[
1,
5,
5.2
],
[
1,
2,
12
],
[
2,
12,
32
],
[
2,
9,
5.6
],
[
2,
6,
0.5
],
[
2,
3,
0.7
],
[
3,
7,
7
],
[
3,
4,
13.2
],
[
3,
1,
4.3
],
[
4,
11,
1.5
],
[
4,
8,
10.4
],
[
4,
5,
2.1
],
[
4,
2,
21
],
[
5,
12,
2.4
],
[
5,
9,
2.7
],
[
5,
6,
7
],
[
5,
3,
4.7
],
[
6,
10,
11.4
],
[
6,
4,
5.2
],
[
6,
1,
1.3
],
[
7,
11,
0.4
],
[
7,
8,
20.5
],
[
7,
5,
15.2
],
[
7,
2,
7.5
],
[
8,
12,
6.1
],
[
8,
6,
55.2
],
[
8,
3,
1.2
],
[
9,
10,
16.2
],
[
9,
7,
0.8
],
[
9,
1,
28.3
],
[
10,
11,
0.2
],
[
10,
8,
12.3
],
[
10,
5,
0.6
],
[
10,
2,
49
],
[
11,
12,
3.5
],
[
11,
9,
5.5
],
[
11,
6,
0.6
],
[
11,
3,
27.6
],
[
12,
10,
5.7
],
[
12,
7,
1.5
],
[
12,
4,
64.1
],
[
1,
10,
17.1
],
[
1,
7,
4.1
],
[
1,
4,
10.4
],
[
1,
1,
0.1
],
[
2,
8,
27.6
],
[
2,
5,
0.2
],
[
2,
2,
4.4
],
[
3,
12,
10.6
],
[
3,
9,
8.3
],
[
3,
6,
9.4
],
[
3,
3,
10.4
],
[
4,
10,
15.3
],
[
4,
7,
3
],
[
4,
4,
36.2
],
[
4,
1,
3.4
],
[
5,
11,
2.9
],
[
5,
5,
0.8
],
[
5,
2,
13.5
],
[
6,
12,
6.4
],
[
6,
9,
5.4
],
[
6,
6,
4.8
],
[
6,
3,
15.2
],
[
7,
10,
7
],
[
7,
7,
2.4
],
[
7,
4,
22.2
],
[
7,
1,
9.9
],
[
8,
11,
0.6
],
[
8,
8,
1.5
],
[
8,
2,
0.9
],
[
9,
12,
12
],
[
9,
9,
4.5
],
[
9,
6,
1.7
],
[
9,
3,
8.1
],
[
10,
10,
9.6
],
[
10,
7,
4
],
[
10,
4,
12.9
],
[
10,
1,
0.3
],
[
11,
11,
0.3
],
[
11,
8,
17.9
],
[
11,
5,
3.8
],
[
12,
12,
0.2
],
[
12,
9,
1.9
],
[
12,
6,
0.7
],
[
12,
3,
0.4
],
[
1,
9,
7.8
],
[
1,
6,
14.2
],
[
1,
3,
6.6
],
[
2,
10,
21.5
],
[
2,
7,
2.2
],
[
2,
4,
4.9
],
[
2,
1,
0.2
],
[
3,
11,
1.1
],
[
3,
8,
22.9
],
[
3,
5,
1.3
],
[
3,
2,
11.7
],
[
4,
12,
2.8
],
[
4,
6,
1.7
],
[
4,
3,
2.6
],
[
5,
10,
10.5
],
[
5,
7,
3.4
],
[
5,
4,
43.3
],
[
5,
1,
8.9
],
[
6,
11,
0.7
],
[
6,
8,
39.3
],
[
6,
5,
1.7
],
[
6,
2,
8.7
],
[
7,
12,
5.6
],
[
7,
9,
5
],
[
7,
3,
4.3
],
[
8,
10,
4.2
],
[
8,
4,
30.3
],
[
9,
8,
10.6
],
[
9,
5,
1.1
],
[
9,
2,
16.5
],
[
10,
12,
5
],
[
10,
9,
1.5
],
[
10,
6,
4.6
],
[
11,
10,
4.7
],
[
11,
7,
2.1
],
[
11,
4,
33.7
],
[
11,
1,
0.3
],
[
12,
11,
0.2
],
[
12,
8,
22.7
],
[
12,
5,
0.6
],
[
12,
2,
1.9
],
[
13,
13,
0
]
]
}
let {
dataX,
dataY,
dataNum
} = data
option = {
backgroundColor: '#fff',
grid: {
left: '3%',
top: '10%',
right: '8%',
containLabel: true
},
tooltip: {
show: true,
formatter: function(p) {
var i = p.seriesIndex;
if (p.componentType == 'series' && !isNaN(i)) {
return p.value[2];
}
},
},
color: ['#5170A2'],
axisLabel: {
textStyle: {
color: '#000'
}
},
visualMap: {
show: false,
min: 0,
max: 270,
inRange: {}
},
xAxis: {
type: 'category',
data: dataX,
position: 'top',
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: '#a4a4a4',
width: 2,
type: 'solid',
}
},
axisTick: {
show: false,
lineStyle: {
color: '#8290a5'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#d6d6d6',
type: 'solid'
}
},
axisLabel: {
show: true,
interval: 0,
}
},
yAxis: {
type: 'category',
data: dataY,
boundaryGap: false,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: '#a4a4a4',
width: 2,
type: 'solid'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#8290a5'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#d6d6d6',
type: 'solid'
}
},
},
series: [{
name: '值',
type: 'scatter',
symbolSize: function(val) {
if (val[2] == 0) {
return 0;
}
if (val[2] < 5) {
return 10;
} else if (val[2] < 10) {
return 15;
}
return val[2];
},
data: dataNum
}]
};
截图如下
