echarts 设置柱状图的渐变色
时间: 2023-10-17 17:24:41 浏览: 84
可以使用 echarts 的渐变色功能来设置柱状图的颜色。具体步骤如下:
1. 定义渐变色
```javascript
var colorList = [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00feff' // 0% 处的颜色
},
{
offset: 1,
color: '#027eff' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
// 其他颜色可以定义在这里
];
```
其中,`colorList` 数组中的每个对象表示一种颜色,`type` 属性表示渐变类型,这里使用了 `linear` 表示线性渐变;`x`、`y`、`x2`、`y2` 表示渐变的起点和终点,这里表示从上到下的渐变;`colorStops` 表示渐变的颜色分布,可以设置多个颜色,`offset` 表示颜色在渐变中的位置,`color` 表示颜色值;`globalCoord` 属性表示是否使用全局坐标系,默认为 `false`。
2. 设置柱状图颜色
```javascript
option = {
...
series: [
{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
normal: {
color: function(params) {
// 根据数据设置不同的颜色
var colorIndex = params.dataIndex % colorList.length;
return colorList[colorIndex];
}
}
}
}
]
}
```
在柱状图的 `itemStyle` 属性中设置 `color` 属性为一个回调函数,该函数返回每个柱子的颜色值。这里根据数据索引对颜色列表取余来循环使用渐变色。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)