encharts 设置每根柱状图的颜色
时间: 2023-08-01 14:06:02 浏览: 46
Echarts 可以通过 `itemStyle.normal.color` 设置每根柱状图的颜色。具体方法如下:
在 `series` 中,每个柱状图的样式可以通过 `itemStyle` 设置,`itemStyle.normal.color` 表示正常状态下柱状图的颜色,例如:
```javascript
series: [{
type: 'bar',
data: [100, 200, 300, 400, 500],
itemStyle: {
normal: {
// 设置每根柱状图的颜色
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex];
}
}
}
}]
```
在上述代码中,`colorList` 数组中存储了每个柱状图的颜色,`params.dataIndex` 表示柱状图的索引,通过 `colorList[params.dataIndex]` 可以获取对应的颜色,从而实现每根柱状图的颜色设置不同。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)