echarts-gl 3D柱状图配置
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, // 视距，用于柱状图控制大小，默认值200rotateSensitivity: 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更接近圆柱