【ECharts】立体柱状图

第一步：

<div id="plan"></div>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
   data () {
    return {
     xDatas: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      yDatas: [3, 6, 1, 9, 3, 10, 3, 8, 3, 0, 0, 0],
    }
   },
  mounted () {
    this.init()
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
  #plan {
    width: 480px;
    height: 300px;
    overflow: hidden;
    background: url('../../assets/bjkuang.png') no-repeat;
    background-size: 100% 100%;
  }
</style>

    // 排期计划(立体柱状图)
    init () {
      let chartDom = document.getElementById('plan');
      let myChart = echarts.init(chartDom);
      myChart.clear();
      let that = this;
      let option = {
        backgroundColor: 'transparent',
        // tooltip: {
        //   trigger: 'axis',
        // },
        xAxis: {
          type: 'category',
          data: that.xDatas,
          axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
              color: "#404040",
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            margin: 18,
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
            interval: 0,
          },
        },
        yAxis: {
          type: 'value',
          show: true,
          gridIndex: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#09426b",
            }
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#09426b",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
          },
        },
        grid: {
          top: '12%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            data: that.yDatas,
            type: 'custom',
            barWidth: 20, // 柱子宽度核心代码
            renderItem: function (params, api) {
              return that.getRenderItem(params, api)
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              textStyle: {
                // fontSize: fontSize(12),
                color: '#fff',
                align: 'center'
              }
            },
          },
        ]
      }
      option && myChart.setOption(option);
    },
    getRenderItem (params, api) {
      // 主子索引值
      const { seriesIndex } = params;
      // 基础坐标
      const basicsCoord = api.coord([api.value(seriesIndex), api.value(1)]);
      // 顶部基础y轴
      const topBasicsYAxis = basicsCoord[1];
      // 基础x轴
      const basicsXAxis = basicsCoord[0];
      // 底部基础y轴
      const bottomYAxis = api.coord([api.value(seriesIndex), 0])[1];
      this.setThreeShaps();
      return {
        type: 'group',
        children: [
          {
            type: 'leftShape',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4cf0f9', },
                { offset: 1, color: '#188df0 ' },
              ]), // 覆盖基础样式
              text: '',
            }
          },
          {
            type: 'rightShape',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4cf0f9', },
                { offset: 1, color: '#188df0 ' },
              ]), // 覆盖基础样式
              text: '',
            },
          },
          {
            type: 'topShape',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#4cf0f9', },
                { offset: 1, color: '#188df0 ' },
              ]), // 覆盖基础样式
            },
          }
        ]
      };
    },
    setThreeShaps () { // 绘制柱状体三个面的图形并注册
      const leftShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 15;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9;
          const p1 = [basicsXAxis - WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
          const p2 = [basicsXAxis - WIDTH, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          const p3 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
          const p4 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右上角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      const rightShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 6;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9;
          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
          const p2 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          const p3 = [basicsXAxis + WIDTH, bottomYAxis]; // 右下角坐标
          const p4 = [basicsXAxis + WIDTH, topBasicsYAxis]; // 右上角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      const topShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const LEFT_WIDTH = 15;
          const RIGHT_WIDTH = 6;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 9
          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
          const p2 = [basicsXAxis + RIGHT_WIDTH, topBasicsYAxis]; // 右上角坐标
          const p3 = [basicsXAxis + RIGHT_WIDTH - LEFT_WIDTH, topBasicsYAxis]; // 左上角坐标
          const p4 = [basicsXAxis - LEFT_WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
          ctx.moveTo(p1[0], p1[1]);
          ctx.lineTo(p2[0], p2[1]);
          ctx.lineTo(p3[0], p3[1]);
          ctx.lineTo(p4[0], p4[1]);
        },
      });
      echarts.graphic.registerShape('leftShape', leftShape);
      echarts.graphic.registerShape('rightShape', rightShape);
      echarts.graphic.registerShape('topShape', topShape);
    },