echarts柱状图颜色分割
时间: 2023-07-11 19:33:07 浏览: 84
彩色图分割
ECharts柱状图可以通过设置颜色分割来实现不同数据之间的颜色区分。具体的实现方法如下:
1. 在series中设置颜色:
```js
series: [{
type: 'bar',
data: [20, 30, 40, 50, 60, 70, 80],
// 设置颜色
itemStyle: {
color: function(params) {
if (params.dataIndex % 2 === 0) {
return '#c23531';
} else {
return '#2f4554';
}
}
}
}]
```
在上面的代码中,通过在`itemStyle`中设置`color`属性,然后使用一个函数来返回不同数据的颜色。这里的函数中,通过`params.dataIndex`来获取当前数据的索引,然后判断索引是否为偶数,如果是偶数,则返回红色,否则返回蓝色。
2. 通过visualMap设置颜色:
```js
visualMap: {
min: 0,
max: 100,
// 设置颜色
color: ['#c23531', '#2f4554'],
orient: 'horizontal',
left: 'center',
bottom: 10
},
series: [{
type: 'bar',
data: [20, 30, 40, 50, 60, 70, 80]
}]
```
在上面的代码中,通过在`visualMap`中设置`color`属性,然后传入一个颜色数组,来定义不同数据的颜色。这里的颜色数组中,第一个颜色代表数据最小值的颜色,最后一个颜色代表数据最大值的颜色。
以上两种方式都可以实现柱状图颜色分割,可以根据实际需求来选择使用哪种方式。
阅读全文