Echarts散点图值重复
时间: 2023-12-30 13:10:42 浏览: 23
在 Echarts 中,散点图的值可以重复,因为散点图通常用于展示数据的分布情况。如果您的数据中存在重复的值,可以考虑在散点图中使用数据分组的方式来展示。以下是一个示例代码,展示如何使用 Echarts 中的 `series.data` 属性来实现数据分组:
```javascript
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [{
type: 'scatter',
data: [
[10, 10, 1],
[20, 20, 2],
[30, 30, 3],
[40, 40, 3],
[50, 50, 4],
[60, 60, 4],
[70, 70, 5],
[80, 80, 5]
],
symbolSize: function(data) {
return Math.sqrt(data[2]) * 10;
},
itemStyle: {
normal: {
color: 'rgba(50, 50, 50, .5)'
}
},
// 使用分组的方式展示数据
markArea: {
silent: true,
data: [[{
xAxis: 0,
yAxis: 0
}, {
xAxis: 30,
yAxis: 5
}], [{
xAxis: 30,
yAxis: 5
}, {
xAxis: 60,
yAxis: 4
}], [{
xAxis: 60,
yAxis: 4
}, {
xAxis: 80,
yAxis: 5
}]]
}
}]
};
```
在这个示例中,我们使用 `series.data` 属性来定义散点图中的数据。每个数据点都是一个数组,包含了该点在散点图中的横坐标、纵坐标以及数据分组的标识符。我们使用 `symbolSize` 属性来定义散点图中每个点的大小,这里使用了开根号的方式来根据数据分组的标识符来计算点的大小。我们还使用了 `itemStyle` 属性来定义每个点的样式。
为了使用分组的方式展示数据,我们使用了 `markArea` 属性来定义每个分组的范围。这里使用了一个静态的分组方式,根据数据分组的标识符来手动定义了每个分组的范围。如果您的数据集比较大,可以根据数据分布情况来自动计算分组的范围,以展示更加准确的数据分布情况。