echarts中柱状图柱子的颜色及宽度修改
时间: 2023-09-20 19:15:12 浏览: 174
可以通过 echarts 的 API 中的 itemStyle 属性来修改柱子的颜色,例如:
```
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D'],
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: [100, 200, 300, 400],
itemStyle: {
color: 'red', // 修改柱子的颜色为红色
barWidth: 20, // 修改柱子的宽度为20像素
},
}],
}
```
其中,itemStyle.color 可以用来修改柱子的颜色,itemStyle.barWidth 可以用来修改柱子的宽度。如果你想给不同的柱子设置不同的颜色,可以通过传入数组来实现,例如:
```
option = {
...
series: [{
type: 'bar',
data: [100, 200, 300, 400],
itemStyle: {
color: function(params) {
var colors = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8'];
return colors[params.dataIndex % colors.length];
},
},
}],
};
```
这样,柱子的颜色就会循环使用 colors 数组中的颜色。
阅读全文
相关推荐

















