echarts 柱状每个柱子显示不同的颜色
时间: 2024-02-24 17:56:20 浏览: 128
要为 Echarts 的柱状图每个柱子显示不同的颜色,可以使用 Echarts 提供的 `itemStyle` 属性来设置每个数据项的样式。具体操作步骤如下:
1. 在 `option` 中的 `series` 对象中找到柱状图的配置项,如下所示:
```javascript
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
```
2. 在该配置项中添加 `itemStyle` 属性,如下所示:
```javascript
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex];
}
}
}
```
3. 在 `itemStyle` 属性中,使用 `color` 属性来设置每个数据项的颜色。在这里,我们使用一个数组 `colorList` 来存放所有的颜色,然后根据当前数据项的索引值 `params.dataIndex` 来获取对应的颜色值。
通过以上操作,就可以为柱状图的每个柱子设置不同的颜色了。
阅读全文