1. 源码
此demo可以直接在echarts的编辑器中运行
option = {
title: {
text: '产量图',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 17
},
left: 'center'
},
tooltip: {},
legend: {
show: false,
orient: 'vertical',
x: 'left',
top: 0,
right: 20,
textStyle: {
fontSize: 12
}
},
visualMap: {
show: false,
max: 1,
inRange: {
color: 'rgba(290, 206, 118, 1)' // 控制柱体颜色
}
},
xAxis3D: {
type: 'category',
name: false,
show: true,
data: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: false,
alignWithLabel: true
},
axisLabel: {
interval: 0,
margin: 12, // 标签与轴的距离
textStyle: {
color: '#fff',
fontSize: 16
}
},
splitLine: {
show: false
}
},
yAxis3D: {
type: 'category',
name: false,
axisLabel: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: '#fff'
}
}
},
zAxis3D: {
name: false,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 12,
textStyle: {
color: '#fff',
fontSize: 16
}
},
splitLine: {
show: false
}
},
grid3D: {
left: 0,
top: 0,
right: 20,
bottom: 0,
boxDepth: 8, // 深度，即y方向的长度
containLabel: true,
viewControl: {
distance: 181, // 视距，用于柱状图控制大小，默认值200
rotateSensitivity: 0, // 禁止鼠标旋转
zoomSensitivity: 0, // 禁止鼠标缩放
alpha: 20, // 视角绕 x 轴，即上下旋转的角度
beta: 28 // 视角绕 z 轴，即左右旋转的角度
}
},
series: [
{
name: '产量',
data: [
[0, 0, 20],
[1, 0, 30],
[2, 0, 18],
[3, 0, 55],
[4, 0, 35],
[5, 0, 23],
[6, 0, 15],
],
type: 'bar3D',
barSize: 7, // 柱子的宽度
shading: 'lambert', // 设置光照效果
// bevelSmoothness: 100, // 柱子倒角的光滑度，圆柱相关设置
// bevelSize: 0.8, // 柱子的倒角尺寸，设置为0更接近圆柱
label: {
show: true,
distance: 2,
textStyle: {
fontSize: 14,
color: '#fff',
fontWeight: 300
}
}
}
]
};
2. 效果图
3. 注意
- 使用3D柱状图需要引入echarts，和echarts-gl两个依赖。
- 三维柱状图区别于二维柱状图，无法直接设置宽度，可以通过设置视距来控制柱状图大小（grid3D.viewControl.distance），视距越大，则显示的越小。
- 二维柱状图的Y轴，在三维柱状图中叫Z轴，X轴不变；三维图中的Y轴类似于深度，设置grid3D.boxDepth可以控制深度。
- X轴刻度标签名称过长，导致显示重叠时，可以通过配置grid3D.viewControl.beta 旋转角度，以及xAxis3D.axisLabel.interval （如果设置为
1，表示『隔一个标签显示一个标签』）控制坐标轴刻度标签的显示间隔来解决。注：三维柱状图不支持二维柱状图中的旋转刻度标签的方式。 - 想让柱体显示上趋近于圆柱体，可以放开上面demo中的两行注释
// bevelSmoothness: 100, // 柱子倒角的光滑度，圆柱相关设置 // bevelSize: 0.8, // 柱子的倒角尺寸，设置为0更接近圆柱
