echarts 立体柱状图 角度
时间: 2023-08-06 15:08:11 浏览: 92
对于 Echarts 的立体柱状图,你可以通过设置柱状图的 `itemStyle` 属性来调整角度。具体来说,可以使用 `bar3D` 类型的柱状图,并设置 `shape` 属性为 `"box"`,然后通过调整 `boxWidth`、`boxHeight` 和 `boxDepth` 属性来控制柱状图的角度。
以下是一个示例代码片段,展示如何创建一个立体柱状图并调整角度:
```javascript
option = {
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
xAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'category',
data: ['X', 'Y', 'Z']
},
grid3D: {
boxWidth: 200,
boxHeight: 80,
boxDepth: 100,
viewControl: {
// 设置初始视角
alpha: 30,
beta: 30,
distance: 250
},
light: {
main: {
intensity: 1.2,
shadowQuality: 'high',
shadow: true
}
}
},
series: [{
type: 'bar3D',
data: [
['A', 'X', 10],
['B', 'Y', 5],
['C', 'Z', 15],
['D', 'X', 7],
['E', 'Y', 8]
],
shading: 'lambert',
label: {
show: true,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
opacity: 0.8
}
}]
};
```
你可以根据需求调整 `grid3D` 中的 `boxWidth`、`boxHeight` 和 `boxDepth` 属性来改变立体柱状图的角度。