调节echart散点图 颜色的范围
时间: 2023-10-09 14:16:26 浏览: 49
要调节 ECharts 散点图中数据点的颜色范围,可以通过 `visualMap` 组件来实现。`visualMap` 组件是一个颜色映射组件,可以将数据值映射到颜色上,从而实现对数据点颜色的控制。
以下是使用 `visualMap` 组件来调节 ECharts 散点图颜色范围的示例代码:
```javascript
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04, 10],
[8.0, 6.95, 20],
[13.0, 7.58, 30],
[9.0, 8.81, 40],
[11.0, 8.33, 50],
[14.0, 9.96, 60],
[6.0, 7.24, 70],
[4.0, 4.26, 80],
[12.0, 10.84, 90],
[7.0, 4.82, 100],
[5.0, 5.68, 110]
],
type: 'scatter'
}],
visualMap: {
min: 0,
max: 100,
dimension: 2,
inRange: {
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
}
}
};
```
在上述代码中,`visualMap` 组件的 `min` 和 `max` 属性分别表示数据值的最小值和最大值,`dimension` 属性表示要映射的数据维度,这里设置为 2,表示映射数据中的第三个元素(即数据点的颜色)。`inRange` 属性表示映射的颜色范围,可以使用数组来设置多个颜色,这里使用 `reverse()` 方法将颜色倒序排列,从而实现颜色范围的反转。
希望能对你有所帮助!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)