vue怎么使用echarts實(shí)現(xiàn)立體柱形圖

今天小編給大家分享一下vue怎么使用echarts實(shí)現(xiàn)立體柱形圖的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

立體柱形圖是由前面、右面、上面三部分組成，繪制時需要先繪制前面為一個圖形，右面和上面繪制為一個圖形，然后在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 = 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 p1 = [shape.x - shape.width / 2, shape.y]
          const p4 = [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 = [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: '0px',
          left: '0px'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            fontSize: fontSize(12)
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#98b9c5'
            }
          },
          data: []  //通過后端傳入數(shù)據(jù)js傳入
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: fontSize(12)
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#98b9c5'
            }
          },
          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',
                shape: {
                  api,
                  xValue: api.value(0) - 0.5,
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
                },
                style: {
                  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, 0, 0, 1,
              [
                { offset: 0, color: '#b1950d' },
                { offset: 0.5, color: '#aea20d' },
                { offset: 1, color: '#a5aa12' }
              ]
            )
          },
          data: [] //后端傳入數(shù)據(jù)
        }]
      }

注意事項(xiàng)：

1)、在注冊圖形時style：只能使用 style: api.style();
text: ''后面才能使用label在圖形頂部放置value

2)、this.$echarts是經(jīng)過統(tǒng)一封裝之后的，具體情況還需具體考慮

（3）生成圖形

generateBarChart () {
      let vm = this
      if (this.$refs['uintEnergyConsume']) { //this.$refs是生成圖形區(qū)域的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 () { //屏幕自適應(yīng)
          vm.handleResize()
        })
      }
    }

（4）template中代碼

<div  ref="uintEnergyConsume"  id="uintEnergyConsume"  class="chart-container" 
   element-loading-text="加載中..."></div>
</div>

（5）效果如下：

以上就是“vue怎么使用echarts實(shí)現(xiàn)立體柱形圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。