echarts柱形图每条柱子的底色怎么设置
时间: 2024-03-13 21:44:57 浏览: 50
3D柱状图 给每根柱子设置不同的颜色.zip
5星 · 资源好评率100%
要设置 echarts 柱形图每条柱子的底色,你可以通过设置 `itemStyle` 属性来实现。具体的做法是:
```javascript
option = {
xAxis: {
data: ['数据一', '数据二', '数据三']
},
yAxis: {},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#c23531','#2f4554','#61a0a8'];
return colorList[params.dataIndex];
}
}
},
data: [10, 20, 30]
}]
};
```
在上述代码中,`itemStyle` 中的 `color` 属性是一个回调函数,它可以接收一个参数 `params`,其中包含了当前柱子的一些信息,比如 `dataIndex` 表示当前柱子的索引。通过设置回调函数返回的颜色值,就可以设置柱子的底色了。在上述代码中,我们设置了一个颜色列表 `colorList`,根据当前柱子的索引返回不同的颜色,从而设置了每条柱子的底色。
阅读全文