本文例項為大家分享了使用Echarts實現立體柱狀圖的具體程式碼，供大家參考，具體內容如下

預覽：

程式碼：

頁面部分:

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

部分:

.roadnum-all {
  width: 100%;
  height: 100%;      /*填滿父級容器*/
}

部分:

import echarts from 'echarts'   // 引入Echarts

export default {
  name: "ltzzt",data() {
    return {
      data: [],dom: null
    }
  },mounted() {
    this.$nextTick(() => {      // 給圖示寬高 使圖示填滿容器
      documenwww.cppcns.com
 
t.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
      this.draw();
    })
  },methods: {
    // 畫圖
    draw() {
      // 網路請求 假裝從後端拿回來的資料
      this.data = [
        { name: '京哈高速',value: 10 },{ name: '京哈高速1',value: 20 },{ name: '京哈高速2',value: 30 },{ name: '京哈高速3',valuhttp://www.cppcns.com
 
e: 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 }
      ];
      // 拼軸顯示和資料的陣列
      let xAxisText = [];
      let dataList = [];
      this.data.forEach(item => {
        xAxisText.push(item.name);
        dataList.push(item.value)
      })
      // 從這裡開始 建立自定義圖形 —— 長方體的正面
      var MyCubeRect = echarts.graphic.extendShape({
        shape: {
          x: 0,y: 0,width: 180,// 長方體寬度
          zWidth: 8,// 陰影折角寬
          zHeight: 4      // 陰影折角高
        },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();
        }
      })

      // 建立第二個自定義圖形 —— 長方體的上面和側面
      var MyCubeShadow = echarts.graphic.extendShape({
        shape: {
          x: 0,zWidth: 8,zHeight: 4
        },shape) {
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue,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: '驗算路線排行榜',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',//  讓x軸文字方向為豎向
            interval: 0,formatter: function (value) {
              return value.split('').join('\n')
            }
          }
        },yAxis: {
          type: 'value'
        },tooltip: {
          trigger: 'axis',axisPointer: {
            type: 'shadow'
          },},series: [{
          name: '次數',type: 'custom',renderItem: (params,api) => {
            let location = api.coord([api.value(0),api.value(1)]);
            return {
              type: 'group',children: [{
            http://www.cppcns.com    type: 'MyCubeRect',shape: {
                  api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]
                },style: api.style(),// api.style()——繼承原本的樣式
              },{
                type: 'MyCubeShadow',style: {
                  fill: api.style(),text: ''            // 繼承原本樣式的基礎上將label清空 如果不清空生成的圖上會顯示兩個重疊的label
                }
              }]
            }
          },stack: '總量qjVCzpBOW',label: {
            show: true,position: 'top',color: '#333',formatter: `{c}次`,fontSize: 16,distance: 15
          },itemStyle: {
            normal: {
              color: (params) => {
                // 使每根柱子顏色都不一樣 
                let colorList = ['#33b56a','#ffb258'];
                if (params.dataIndex + 1 <= colorList.length) {
                  return colorList[params.dataIndex]
                } else {
                  // 如果柱子的數量超過顏色陣列 就從頭再來一遍
                  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();
        }
      });
    }
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。