echarts柱状图颜色动态修改
时间: 2023-08-07 18:03:20 浏览: 325
要实现ECharts柱状图颜色动态修改,可以通过以下步骤实现:
1. 在ECharts中设置柱状图的颜色为一个数组,例如:
```
color: ['#3398DB', '#8FC31F', '#FFC125']
```
2. 在柱状图的Series中设置每个柱子的颜色,例如:
```
data: [320, 332, 301, 334, 390, 330, 320],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#FFC125', '#8FC31F', '#3398DB'];
return colorList[params.dataIndex % colorList.length]
}
}
}
```
这里的`colorList`是一个颜色数组,`params.dataIndex`表示当前柱子的索引,`%`运算符表示取余数,`params.dataIndex % colorList.length`可以保证颜色循环使用。
3. 在需要动态修改柱子颜色的时候,可以通过`setOption`方法重新设置柱子颜色数组,例如:
```
var chart = echarts.init(document.getElementById('chart'));
var colorList = ['#FFC125', '#8FC31F', '#3398DB'];
chart.setOption({
color: colorList
});
```
这样就可以动态修改柱子的颜色了。
阅读全文