Vue uses Echarts to implement a three-dimensional bar chart

<template>
  <div class="roadnum-all" ref="roadnumall">
    <div id="roadnum" ref="dom"></div>
  </div>
</template>

.roadnum-all {
  width: 100%;
  height: 100%; /*Fill the parent container*/
}

import echarts from 'echarts' // Import Echarts

export default {
  name: "ltzzt",
  data() {
    return {
      data: [],
      dom: null
    }
  },
  mounted() {
    this.$nextTick(() => { // Give the icon width and height so that it fills the container document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
      this.draw();
    })
  },
  methods: {
    // Draw() {
      // Network request pretends to get data from the backend this.data = [
        { name: '京哈高速', value: 10 },
        { name: '京哈高速1', value: 20 },
        { name: '京哈高速2', value: 30 },
        { name: '京哈高速3', value: 40 },
        { name: '京哈高速4', value: 50 },
        { name: '京哈高速5', value: 60 },
        { name: '京哈高速6', value: 70 },
        { name: '京哈高速7', value: 80 },
        { name: '京哈高速8', value: 90 },
        { name: '京哈高速9', value: 100 },
        { name: '京哈高速10', value: 110 },
        { name: '京哈高速11', value: 120 }
      ];
      // Array of axis display and data let xAxisText = [];
      let dataList = [];
      this.data.forEach(item => {
        xAxisText.push(item.name);
        dataList.push(item.value)
      })
      // Start creating custom graphics from here - the front of the cuboid var MyCubeRect = echarts.graphic.extendShape({
        shape:
          x: 0,
          y: 0,
          width: 180, // cuboid width zWidth: 8, // shadow corner width zHeight: 4 // shadow corner height },
        buildPath: function (ctx, shape) {
          console.log(ctx, shape);
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [shape.x, shape.y];
          const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
          const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];

          ctx.moveTo(p0[0], p0[1]); //0
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p2[0], p2[1]); //2
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.lineTo(p0[0], p0[1]); //0
          ctx.closePath();
        }
      })

      // Create the second custom shape - the top and side of the cuboid var MyCubeShadow = echarts.graphic.extendShape({
        shape:
          x: 0,
          y: 0,
          width: 180,
          zWidth: 8,
          zHeight: 4
        },
        buildPath: function (ctx, shape) {
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [shape.x, shape.y];
          const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
          const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p5[0], p5[1]); //5
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p4[0], p4[1]); //4

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p7[0], p7[1]); //7
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.closePath();
        }
      });
      echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
      echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
      const option = {
        color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
        title:
          text: 'Verification route ranking',
          left: 20,
          top: 20
        },
        legend: {
          show: true,
          top: 25
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '15%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:
          type: 'category',
          data: xAxisText,
          boundaryGap: true,
          interval: 0,
          axisLabel: {
            color: '#333',
            // Make the x-axis text direction vertical interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer:
            type: 'shadow'
          },
        },
        series: [{
          name: 'Number of times',
          type: 'custom',
          renderItem: (params, api) => {
            let location = api.coord([api.value(0), api.value(1)]);
            return {
              type: 'group',
              children: [{
                type: 'MyCubeRect',
                shape:
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
                },
                style: api.style(), // api.style()——inherits the original style}, {
                type: 'MyCubeShadow',
                shape:
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
                },
                style: {
                  fill: api.style(),
                  text: '' // Inherit the original style and clear the label. If it is not cleared, two overlapping labels will be displayed on the generated graph.
                }
              }]
            }
          },
          stack: 'total amount',
          label: {
            show: true,
            position: 'top',
            color: '#333',
            formatter: `{c} times`,
            fontSize: 16,
            distance: 15
          },
          itemStyle: {
            normal: {
              color: (params) => {
                // Make each column color different let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'];
                if (params.dataIndex + 1 <= colorList.length) {
                  return colorList[params.dataIndex]
                } else {
                  // If the number of columns exceeds the color array, start over again return colorList[params.dataIndex - colorList.length]
                }
              }
            }
          },
          data: dataList
        }]
      };
      this.dom = echarts.init(this.$refs.dom);
      this.dom.setOption(option, true)
      window.addEventListener("resize", () => {
        if (document.getElementById('roadnum') && this.$refs.roadnumall) {
          document.getElementById('roadnum').removeAttribute('_echarts_instance_');
          document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
          document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
          this.dom.resize();
        }
      });
    }
  }
}