echarts柱形图给不同柱子设置不同的颜色怎么做
时间: 2024-02-05 08:04:49 浏览: 140
3D柱状图 给每根柱子设置不同的颜色.zip
5星 · 资源好评率100%
你可以通过 echarts 的 `series.itemStyle.color` 属性为柱形图的不同柱子设置不同的颜色,具体的代码如下所示:
```javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
color: function(params) { // 设置柱子的颜色为根据数据动态计算的颜色
var colorList = ['orange', 'blue', 'green', 'red', 'purple', 'pink', 'yellow'];
return colorList[params.dataIndex];
}
}
}]
}
```
在上面的代码中,我们将 `series.itemStyle.color` 属性设置为一个回调函数,该函数根据数据值的不同返回不同的颜色值。在这个例子中,我们定义了一个颜色列表,根据数据索引返回对应的颜色值。这样就可以为每个柱子设置不同的颜色。你可以根据需要修改颜色列表和颜色计算逻辑来自定义不同柱子的颜色。
阅读全文