echarts-gl 3D柱状图配置

1. 源码

此demo可以直接在echarts的编辑器中运行

javascript 复制代码

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中的两行注释

javascript 复制代码

// bevelSmoothness: 100, // 柱子倒角的光滑度，圆柱相关设置
// bevelSize: 0.8, // 柱子的倒角尺寸，设置为0更接近圆柱