echarts柱状图中的柱状图显示正负值,并且位置相对
时间: 2023-06-29 14:09:09 浏览: 153
要在 Echarts 中实现柱状图显示正负值,并且位置相对,可以采用如下的方式:
1.在数据中,分别将正负值分开,例如将正值存储在一个数组中,将负值存储在另一个数组中。
2.在 Echarts 中,通过设置 `yAxis` 的 `splitLine` 属性来实现正负值分别显示在两个 y 轴上,同时设置 `splitArea` 属性来显示 y 轴之间的区域。
3.在 `series` 中,分别设置正负值的柱状图,通过 `stack` 属性来让正负值柱状图位置相对,并设置 `itemStyle` 属性来实现柱状图的颜色和边框等样式。
下面是一个示例代码,可以参考:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value',
splitLine: {
show: false
}
}, {
type: 'value',
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['#fff', '#f7f7f7']
}
}
}],
series: [{
name: 'Positive',
type: 'bar',
stack: 'value',
data: [320, 332, 301, 334, 390, 330, 320],
itemStyle: {
color: '#28a745',
borderColor: '#fff',
borderWidth: 1
}
}, {
name: 'Negative',
type: 'bar',
stack: 'value',
yAxisIndex: 1,
data: [-120, -132, -101, -134, -190, -230, -210],
itemStyle: {
color: '#dc3545',
borderColor: '#fff',
borderWidth: 1
}
}]
};
```
这样就可以实现柱状图显示正负值,并且位置相对的效果了。