echarts立体正负柱状图不折叠
时间: 2023-10-05 08:07:42 浏览: 82
echarts的柱状图立体效果解决方案
要实现 echarts 的立体正负柱状图不折叠,需要对柱状图的设置进行调整。具体实现方法如下:
1. 设置柱状图的类型为 'bar3D',并且将 'bevelSize' 属性值设置为 0,这样可以取消柱状图的折叠效果。
```
series: [{
type: 'bar3D',
bevelSize: 0,
...
}]
```
2. 在数据中添加一个额外的维度,用于区分正负数值。例如,可以将正数的值设为正值,将负数的值设为负值。
```
data: [
[0, 0, 5, '+5'],
[0, 1, -3, '-3'],
...
]
```
3. 设置正数和负数的颜色,例如,将正数的颜色设置为红色,将负数的颜色设置为蓝色。
```
itemStyle: {
color: function(params) {
return params.data[3][0] === '+' ? '#FF0000' : '#0000FF';
}
}
```
完整代码如下:
```
option = {
grid3D: {},
xAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis3D: {
type: 'category',
data: ['X', 'Y', 'Z']
},
zAxis3D: {
type: 'value'
},
series: [{
type: 'bar3D',
bevelSize: 0,
data: [
[0, 0, 5, '+5'],
[0, 1, -3, '-3'],
[0, 2, 2, '+2'],
[1, 0, -4, '-4'],
[1, 1, 1, '+1'],
[1, 2, -2, '-2'],
[2, 0, 3, '+3'],
[2, 1, -2, '-2'],
[2, 2, 3, '+3'],
[3, 0, -2, '-2'],
[3, 1, 4, '+4'],
[3, 2, -1, '-1'],
[4, 0, 5, '+5'],
[4, 1, -1, '-1'],
[4, 2, 3, '+3']
],
itemStyle: {
color: function(params) {
return params.data[3][0] === '+' ? '#FF0000' : '#0000FF';
}
}
}]
};
```
以上代码可以在 echarts 官网的“3D 柱状图”示例中进行测试。
阅读全文