立體柱形圖是由前面、右面、上面三部分組成，繪製時需要先繪製前面為一個圖形，右面和上面繪製為一個圖形，然後在echats中註冊，在option的series中renderItem中渲染

程式碼如下：

（1）註冊繪製圖形

registry () {
      let MyCubeRect = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,y: 0,width: 20,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 / 2,shape.y]
          const p4 = [shape.x + shape.width / 2,shape.y]
          const p2 = [shape.x - shape.width / 2,xAxisPoint[1]]
          const p3 = [shape.x + shape.width / 2,xAxisPoint[1]]

          ctx.moveTo(p0[0],p0[1])
          ctx.lineTo(p1[0],p1[1])
          ctx.lineTo(p2[0],p2[1])
          ctx.lineTo(p3[0],p3[1])
          ctx.lineTo(p4[0],p4[1])
          ctx.lineTo(p0[0],p0[1])
          ctx.closePath()
        }
      })
      let MyCubeShadow = thishttp://www.cppcns.com
 
.$echarts.graphic.extendShape({
        shape: {
          x: 0,0])
          const p1 = [shape.x - shape.width / 2,shape.y]
          const p6 = [shape.x + shape.width / 2 + shape.zWidth,shape.y - shape.zHeight]
          const p7 = [shape.x - shape.width / 2 + shape.zWidth,shape.y - shape.zHeight]
          const p3 = [http://www.cppcns.com
 
shape.x + shape.width / 2,xAxisPoint[1]]
          const p5 = [shape.x + shape.width / 2 + shape.zWidth,xAxisPoint[1] - shape.zHeight]

          ctx.moveTo(p4[0],p4[1])
          ctx.lineTo(p3[0],p3[1])
          ctx.lineTo(p5[0],p5[1])
          ctx.lineTo(p6[0],p6[1])
          ctx.lineTo(p4[0],p4[1])

          ctx.moveTo(p4[0],p4[1])
          ctx.lineTo(p6[0],p6[1])
          ctx.lineTo(p7[0],p7[1])
          ctx.lineTo(p1[0],p1[1])
          ctx.lineTo(p4[0],p4[1])
          ctx.closePath()
        }
      })
      this.$echarts.graphic.registerShape('MyCubeRect',MyCubeRect)
      this.$echarts.graphic.registerShape('MyCubeShadow',MyCubeShadow)
    }

（2）渲染圖形

barChartOption: {
        tooltip: {
          trigger: 'axis',axisPointer: {
            type: 'cross',label: {
              backgroundColor: '#6a7985'
            }
          }
        },grid: {
          containLabel: true,top: '30px',bottom: 'http://www.cppcns.com0px',left: '0px'
        },xAxis: {
          type: 'category',axisLabel: {
            interval: 0,fontSize: fontSize(12)
          },axisLine: {
            show: false,lineStyle: {
              color: '#98b9c5'
            }
          },data: []  //通過後端傳入資料傳入
        },yAxis: {
          type: 'value',axisLabel: {
            fontSize: fontSize(12)
          },splitLine: {
            lineStyle: {
              color: '#3a586a',type: 'dashed'
            }
          }
        },series: [{
          name: '單位面積能耗',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) - 0.5,yValue: api.value(1),x: location[0],y: location[1]
                },style: api.style()
              },{
                type: 'MyCubeShadow',style: {
                www.cppcns.com  fill: api.style(),text: ''
                }
              }]
            }
          },stack: '單位面積能耗',label: {
            show: true,position: 'top',formatter: '{c}',textStyle: {
              fontSize: fontSize(12),color: '#fff',align: 'center'
            }
          },itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0,1,[
                { offset: 0,color: '#b1950d' },{ offset: 0.5,color: '#aea20d' },{ offset: 1,color: '#a5aa12' }
              ]
            )
          },data: [] //後端傳入資料
        }]
      }

注意事項：

1）、在註冊圖形時style：只能使用 style: api.style();
text: ''後面才能使用label在圖形頂部放置value
2）、this.$echarts是經過統一封裝之後的，具體情況還需具體考慮
3）、生成圖形

generateBarChart () {
      let vm = this
      if (this.$refs['uintEnergyConsume']) { //this.$refs是生成圖形區域的ref值
        this.$echarts.graphic.registerShape('MyCubeRect',this.MyCubeRect)
        this.$echarts.graphic.registerShape('MyCubeShadow',this.MyCubeShadow)
        this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])
        this.barChart.setOption(this.barChartOption,false,true)
        $(window).resize(function () { //螢幕自適應
          vm.handleResize()
        })
      }
    }

（4）template中程式碼

<div  ref="uintEnergyConsume"  id="uintEnergyConsume"  class="chart-container" 
 style="width: 100%;"  element-loading-text="載入中..."></div>
</div>

（5）效果如下：

參考圖形網址：使用Echarts實現立體柱狀圖

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