echarts怎么给每个柱子边框设置不同颜色
时间: 2023-10-19 21:34:53 浏览: 182
echarts简单实例,根据数值大小变换颜色,双柱
可以通过 ECharts 的 `itemStyle` 属性来设置柱状图每个柱子的边框颜色。具体做法是:
1. 在 `option` 中设置 `series` 的 `itemStyle` 属性,可以全局设置所有柱状图的样式,如下所示:
```javascript
option = {
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
borderColor: '#000' // 设置边框颜色
}
}]
};
```
2. 如果需要给每个柱子设置不同的边框颜色,可以在 `data` 数组中为每个数据项单独设置 `itemStyle` 属性,如下所示:
```javascript
option = {
series: [{
type: 'bar',
data: [{
value: 10,
itemStyle: {
borderColor: '#f00' // 第一个柱子的边框颜色为红色
}
}, {
value: 20,
itemStyle: {
borderColor: '#0f0' // 第二个柱子的边框颜色为绿色
}
}, {
value: 30,
itemStyle: {
borderColor: '#00f' // 第三个柱子的边框颜色为蓝色
}
}, {
value: 40,
itemStyle: {
borderColor: '#ff0' // 第四个柱子的边框颜色为黄色
}
}, {
value: 50,
itemStyle: {
borderColor: '#f0f' // 第五个柱子的边框颜色为紫色
}
}]
}]
};
```
通过上述方法,就可以为每个柱子单独设置不同的边框颜色了。
阅读全文