Vue implementiert dreidimensionales Säulendiagramm basierend auf E-Charts

Registrierung () {
      let MyCubeRect = this.$echarts.graphic.extendShape({
        Form:
          x: 0,
          y: 0,
          Breite: 20,
          zBreite: 8,
          zHöhe: 4
        },
        BuildPath: Funktion (ctx, Form) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const p0 = [Form.x, Form.y]
          const p1 = [Form.x - Form.Breite / 2, Form.y]
          const p4 = [Form.x + Form.Breite / 2, Form.y]
          const p2 = [Form.x - Form.Breite / 2, xAchsenpunkt[1]]
          const p3 = [Form.x + Form.Breite / 2, xAchsenpunkt[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()
        }
      })
      lass MyCubeShadow = this.$echarts.graphic.extendShape({
        Form:
          x: 0,
          y: 0,
          Breite: 20,
          zBreite: 8,
          zHöhe: 4
        },
        BuildPath: Funktion (ctx, Form) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const p1 = [Form.x - Form.Breite / 2, Form.y]
          const p4 = [Form.x + Form.Breite / 2, Form.y]
          const p6 = [Form.x + Form.Breite / 2 + Form.zBreite, Form.y - Form.zHöhe]
          const p7 = [Form.x - Form.Breite / 2 + Form.zBreite, Form.y - Form.zHöhe]
          const p3 = [Form.x + Form.Breite / 2, xAchsenpunkt[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()
        }
      })
      dies.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
      dies.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
    }

Balkendiagrammoption: {
        Tooltip: {
          Auslöser: 'Achse',
          Achsenzeiger:
            Typ: 'Kreuz',
            Etikett: {
              Hintergrundfarbe: '#6a7985'
            }
          }
        },
        Netz: {
          containLabel: wahr,
          oben: '30px',
          unten: '0px',
          links: '0px'
        },
        x-Achse:
          Typ: "Kategorie",
          Achsenbezeichnung: {
            Intervall: 0,
            Schriftgröße: Schriftgröße(12)
          },
          Achsenlinie: {
            anzeigen: falsch,
            Linienstil:
              Farbe: '#98b9c5'
            }
          },
          data: [] // Daten, die über das Backend js übergeben werden},
        yAchse: {
          Typ: "Wert",
          Achsenbezeichnung: {
            Schriftgröße: Schriftgröße(12)
          },
          Achsenlinie: {
            anzeigen: falsch,
            Linienstil:
              Farbe: '#98b9c5'
            }
          },
          geteilte Zeile: {
            Linienstil:
              Farbe: '#3a586a',
              Typ: ‚gestrichelt‘
            }
          }
        },
        Serie: [{
          Name: 'Energieverbrauch pro Flächeneinheit',
          Typ: "benutzerdefiniert",
          renderItem: (params, api) => {
            let Standort = api.Koordinate([api.Wert(0), api.Wert(1)])
            zurückkehren {
              Typ: "Gruppe",
              Kinder: [{
                Typ: "MyCubeRect",
                Form:
                  API,
                  xWert: api.value(0) - 0,5,
                  yWert: api.value(1),
                  x: Standort[0],
                  y: Standort[1]
                },
                Stil: api.style()
              },
              {
                Typ: 'MyCubeShadow',
                Form:
                  API,
                  xWert: api.value(0) - 0,5,
                  yWert: api.value(1),
                  x: Standort[0],
                  y: Standort[1]
                },
                Stil: {
                  füllen: api.style(),
                  text: ''
                }
              }]
            }
          },
          Stapel: 'Energieverbrauch pro Flächeneinheit',
          Etikett: {
            zeigen: wahr,
            Position: 'oben',
            Formatierer: "{c}",
            Textstil: {
              Schriftgröße: Schriftgröße(12),
              Farbe: '#fff',
              ausrichten: "zentriert"
            }
          },
          Artikelstil: {
            Farbe: neu dies.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { Offset: 0, Farbe: '#b1950d' },
                { Offset: 0,5, Farbe: '#aea20d' },
                { Offset: 1, Farbe: '#a5aa12' }
              ]
            )
          },
          data: [] //Vom Backend übergebene Daten}]
      }

generateBarChart() {
      lass vm = dies
      if (this.$refs['uintEnergyConsume']) { //this.$refs ist der Referenzwert des generierten Grafikbereichs this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)
        dies.$echarts.graphic.registerShape('MyCubeShadow', dies.MyCubeShadow)
        dies.barChart = dies.$echarts.init(dies.$refs['uintEnergyConsume'])
        this.barChart.setOption(this.barChartOption, falsch, wahr)
        $(window).resize(function () { //Bildschirmanpassung vm.handleResize()
        })
      }
    }

<div ref="uintEnergyConsume" id="uintEnergyConsume" Klasse="Chart-Container" 
 style="width: 100%;" element-loading-text="Wird geladen..."></div>
</div>