echarts让集中的散点图点合并
时间: 2023-07-05 16:04:33 浏览: 42
可以使用 ECharts 提供的 visualMap 组件来实现散点图点的合并。
首先,需要在 option 中配置 visualMap 组件,指定 visualMap 组件的 type 为 'continuous' 或 'piecewise',并设置 visualMap 组件的最小值和最大值。例如:
```
option = {
...
visualMap: {
type: 'continuous',
min: 0,
max: 100,
calculable: true,
color: ['#50a3ba', '#eac736', '#d94e5d'],
textStyle: {
color: '#000'
}
},
...
}
```
然后,在 series 中使用 symbolSize 属性来设置散点的大小,同时使用 visualMap-continuous 组件或 visualMap-piecewise 组件来映射 symbolSize 的大小。例如:
```
option = {
...
series: {
type: 'scatter',
symbolSize: function (data) {
return data[2];
},
itemStyle: {
color: '#50a3ba'
},
data: [
[10, 20, 30],
[20, 30, 50],
...
],
...
},
...
}
```
这里的 data 数组中每个元素都是一个数组,包含了散点的 x 坐标、y 坐标和对应的 symbolSize 值。symbolSize 的大小可以通过 visualMap 组件来映射,例如:
```
option = {
...
visualMap: {
type: 'continuous',
min: 0,
max: 100,
calculable: true,
color: ['#50a3ba', '#eac736', '#d94e5d'],
textStyle: {
color: '#000'
}
},
series: {
type: 'scatter',
symbolSize: function (data) {
return data[2];
},
itemStyle: {
color: '#50a3ba'
},
data: [
[10, 20, 30],
[20, 30, 50],
...
],
...
},
...
}
```
这样,symbolSize 的大小就会根据 visualMap 组件中指定的范围进行映射,最小值对应最小的点,最大值对应最大的点,中间值对应中间大小的点。