分别设置echarts的柱状图边框颜色
时间: 2024-12-20 15:06:09 浏览: 7
在ECharts中,你可以通过设置`itemStyle`属性来分别设置柱状图各个系列的边框颜色。以下是一个示例代码,展示了如何为每个系列设置不同的边框颜色:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '系列1',
type: 'bar',
data: [120, 200, 150, 80, 70],
itemStyle: {
borderColor: '#FF0000',
borderWidth: 2
}
},
{
name: '系列2',
type: 'bar',
data: [150, 230, 200, 120, 110],
itemStyle: {
borderColor: '#00FF00',
borderWidth: 2
}
},
{
name: '系列3',
type: 'bar',
data: [180, 270, 250, 160, 150],
itemStyle: {
borderColor: '#0000FF',
borderWidth: 2
}
}
]
};
```
在这个示例中,我们为每个系列分别设置了不同的边框颜色:
- 系列1的边框颜色为红色(#FF0000)
- 系列2的边框颜色为绿色(#00FF00)
- 系列3的边框颜色为蓝色(#0000FF)
通过这种方式,你可以灵活地为每个系列的柱状图设置不同的边框颜色。
阅读全文