echart散点图纵轴分隔区域,点成为方形,叠加部分颜色加深
时间: 2023-08-06 18:04:10 浏览: 52
实现这个需求可以通过 ECharts 提供的 visualMap 组件和 symbolSize 属性来实现。
首先,使用 visualMap 组件来分隔纵轴区域,代码如下:
```javascript
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
visualMap: {
show: false,
dimension: 1,
pieces: [
{min: 0, max: 20, color: '#FFDAB9'},
{min: 20, max: 40, color: '#FFA07A'},
{min: 40, max: 60, color: '#FF7F50'},
{min: 60, max: 80, color: '#FF4500'},
{min: 80, max: 100, color: '#FF0000'}
]
},
series: [{
type: 'scatter',
data: [
[10, 20],
[30, 40],
[50, 60],
[70, 80],
[90, 100]
],
symbolSize: function (val) {
return val[1] / 5; // 根据数据大小动态设置点的大小
}
}]
};
```
上面的代码中,visualMap 组件的 dimension 属性设置为 1,表示 visualMap 组件用于控制 y 轴的颜色分隔区域。pieces 属性用于设置颜色分隔区间及颜色值。
接着,使用 symbolSize 属性来设置散点图的点的大小。我们可以根据数据大小动态设置点的大小,这里的代码是将 y 轴的值除以 5 作为点的大小。
最后,使用 visualMap 组件的 textStyle 属性或者 label 属性来设置颜色分隔区间的标签,代码如下:
```javascript
visualMap: {
show: true,
dimension: 1,
pieces: [
{min: 0, max: 20, color: '#FFDAB9'},
{min: 20, max: 40, color: '#FFA07A'},
{min: 40, max: 60, color: '#FF7F50'},
{min: 60, max: 80, color: '#FF4500'},
{min: 80, max: 100, color: '#FF0000'}
],
textStyle: {
color: '#333'
}
},
```
通过设置 textStyle 属性或者 label 属性,可以设置颜色分隔区间的标签颜色、字体大小等。