echarts柱状图颜色
时间: 2023-07-11 22:34:59 浏览: 86
Echarts的柱状图颜色可以通过配置项中的itemStyle属性来进行设置。其中,normal属性用于设置柱状图的默认样式,emphasis属性用于设置柱状图被选中时的样式。下面是一个示例代码,可以将柱状图的默认颜色设置为红色,被选中时的颜色设置为黄色:
```
option = {
...
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
normal: {
color: 'red'
},
emphasis: {
color: 'yellow'
}
}
}]
...
};
```
你也可以通过设置颜色数组的方式来为柱状图的每个柱子设置不同的颜色,示例代码如下:
```
option = {
...
color: ['#3398DB','#87CEFA','#FFA07A','#6B8E23','#FF6347'],
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#3398DB','#87CEFA','#FFA07A','#6B8E23','#FF6347'];
return colorList[params.dataIndex];
}
}
}
}]
...
};
```
以上代码将柱状图的颜色设置为了一个颜色数组,每个柱子的颜色都通过dataIndex来获取颜色数组中对应位置的颜色。
阅读全文