【echarts】柱状图正负值双色
时间: 2023-10-05 13:04:37 浏览: 103
您好!对于ECharts中的柱状图正负值双色,您可以通过使用渐变色(gradient)来实现。以下是一个示例代码:
```
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [-5, -20, 36, -10, 15],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF6464'
}, {
offset: 1,
color: '#00FFFF'
}]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00FFFF'
}, {
offset: 1,
color: '#00FF00'
}])
];
if (params.data >= 0) {
return colorList;
} else {
return colorList;
}
}
}
}
}]
};
```
在上述代码中,我们定义了两个渐变色,一个用于正值(从红色到青色),另一个用于负值(从青色到绿色)。通过判断数据值的正负,设置不同的渐变色来实现柱状图的正负值双色显示。
希望能对您有所帮助!如果有任何问题,请随时提问。
阅读全文