Vue implements three-dimensional column chart based on echarts

The three-dimensional column chart consists of three parts: the front, the right, and the top. When drawing, you need to draw the front as a graphic, the right and the top as a graphic, then register it in echats, and render it in renderItem in the series of option

The code is as follows:

(1) Registering and drawing graphics

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) Rendering graphics

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: [] // data passed in through the backend js},
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: fontSize(12)
          },
          axisLine: {
            show: false,
            lineStyle:
              color: '#98b9c5'
            }
          },
          splitLine: {
            lineStyle:
              color: '#3a586a',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: 'Energy consumption per unit area',
          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: 'Energy consumption per unit area',
          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: [] //Data passed in from the backend}]
      }

Note:

1) When registering graphics, style: only style can be used: api.style();
text: ''You can use label to place value on top of the graph later
2) this.$echarts is packaged uniformly, and the specific situation needs to be considered specifically.
3) Generate graphics

generateBarChart() {
      let vm = this
      if (this.$refs['uintEnergyConsume']) { //this.$refs is the ref value of the generated graphics area 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 () { //Screen adaptation vm.handleResize()
        })
      }
    }

(4) Code in template

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

(5) The effects are as follows:

Reference graphic URL: Vue uses Echarts to implement a three-dimensional bar chart

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: