Vue verwendet Echarts, um ein dreidimensionales Balkendiagramm zu implementieren

<Vorlage>
  <div Klasse="roadnum-all" ref="roadnumall">
    <div id="roadnum" ref="dom"></div>
  </div>
</Vorlage>

.roadnum-alle {
  Breite: 100 %;
  Höhe: 100 %; /*Den übergeordneten Container füllen*/
}

Echarts von „echarts“ importieren // Echarts importieren

Standard exportieren {
  Name: "ltzzt",
  Daten() {
    zurückkehren {
      Daten: [],
      dom: null
    }
  },
  montiert() {
    this.$nextTick(() => { // Geben Sie dem Symbol Breite und Höhe an, sodass es den Container ausfüllt document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
      dies.zeichnen();
    })
  },
  Methoden: {
    // Ziehen() {
      // Netzwerkanfrage gibt vor, Daten vom Backend abzurufen this.data = [
        { Name: '京哈高速', Wert: 10 },
        { Name: 'Name des Benutzers 1', Wert: 20 },
        { Name: 'Anzahl der Zeichen 2', Wert: 30 },
        { Name: 'Name des Spielers 3', Wert: 40 },
        { Name: 'Anzahl der Zeichen 4', Wert: 50 },
        { Name: 'Anzahl der Zeichen 5', Wert: 60 },
        { Name: 'Name des Spielers 6', Wert: 70 },
        { Name: 'Name des Spielers 7', Wert: 80 },
        { Name: 'Name des Spielers 8', Wert: 90 },
        { Name: 'Name des Spielers 9', Wert: 100 },
        { Name: '0 ...
        { Name: 'Name des Spielers 11', Wert: 120 }
      ];
      // Array der Achsenanzeige und Daten let xAxisText = [];
      Lassen Sie Datenliste = [];
      diese.data.forEach(item => {
        xAxisText.push(Elementname);
        Datenliste.push(Element.Wert)
      })
      // Beginnen Sie hier mit der Erstellung benutzerdefinierter Grafiken - der Vorderseite des Quaders var MyCubeRect = echarts.graphic.extendShape({
        Form:
          x: 0,
          y: 0,
          width: 180, // Breite des Quaders zWidth: 8, // Breite der Schattenecke zHeight: 4 // Höhe der Schattenecke },
        BuildPath: Funktion (ctx, Form) {
          console.log(ctx, Form);
          const api = form.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [Form.x, Form.y];
          const p1 = [Form.x - Form.Breite / xAchsenText.Länge, Form.y];
          const p4 = [Form.x + Form.Breite / xAxisText.Länge, Form.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();
        }
      })

      // Erstellen Sie die zweite benutzerdefinierte Form – die Oberseite und die Seite des Quaders var MyCubeShadow = echarts.graphic.extendShape({
        Form:
          x: 0,
          y: 0,
          Breite: 180,
          zBreite: 8,
          zHöhe: 4
        },
        BuildPath: Funktion (ctx, Form) {
          const api = form.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [Form.x, Form.y];
          const p1 = [Form.x - Form.Breite / xAchsenText.Länge, Form.y];
          const p4 = [Form.x + Form.Breite / xAxisText.Länge, Form.y];
          const p6 = [Form.x + Form.Breite / xAchsenText.Länge + Form.zBreite, Form.y - Form.zHöhe];
          const p7 = [Form.x - Form.Breite / xAchsenText.Länge + Form.zBreite, Form.y - Form.zHöhe];
          const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
          const p5 = [xAchsenpunkt[0] + Form.Breite / xAchsentext.Länge + Form.zBreite, xAchsenpunkt[1] - Form.zHöhe];

          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('MeinCubeRect', MeinCubeRect);
      echarts.graphic.registerShape('MeinCubeShadow', MeinCubeShadow);
      const option = {
        Farbe: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
        Titel:
          Text: 'Überprüfung der Routenbewertung',
          links: 20,
          oben: 20
        },
        Legende: {
          zeigen: wahr,
          oben: 25
        },
        Netz: {
          links: '3%',
          rechts: '4%',
          oben: '15%',
          unten: '3%',
          containLabel: wahr
        },
        x-Achse:
          Typ: "Kategorie",
          Daten: xAxisText,
          boundageGap: wahr,
          Intervall: 0,
          Achsenbezeichnung: {
            Farbe: '#333',
            // Setzen Sie das vertikale Intervall für die Textrichtung der X-Achse auf 0,
            Formatierer: Funktion (Wert) {
              Rückgabewert.split('').join('\n')
            }
          }
        },
        yAchse: {
          Typ: "Wert"
        },
        Tooltip: {
          Auslöser: 'Achse',
          Achsenzeiger:
            Typ: "Schatten"
          },
        },
        Serie: [{
          Name: 'Anzahl der Male',
          Typ: "benutzerdefiniert",
          renderItem: (params, api) => {
            let location = api.coord([api.value(0), api.value(1)]);
            zurückkehren {
              Typ: "Gruppe",
              Kinder: [{
                Typ: "MyCubeRect",
                Form:
                  API,
                  xWert: api.Wert(0),
                  yWert: api.value(1),
                  x: Standort[0],
                  y: Standort[1]
                },
                style: api.style(), // api.style() – erbt den ursprünglichen Stil}, {
                Typ: 'MyCubeShadow',
                Form:
                  API,
                  xWert: api.Wert(0),
                  yWert: api.value(1),
                  x: Standort[0],
                  y: Standort[1]
                },
                Stil: {
                  füllen: api.style(),
                  Text: '' // Den ursprünglichen Stil übernehmen und die Beschriftung löschen. Wenn sie nicht gelöscht wird, werden im generierten Diagramm zwei überlappende Beschriftungen angezeigt.
                }
              }]
            }
          },
          Stapel: 'Gesamtbetrag',
          Etikett: {
            zeigen: wahr,
            Position: 'oben',
            Farbe: '#333',
            Formatierer: `{c} mal`,
            Schriftgröße: 16,
            Entfernung: 15
          },
          Artikelstil: {
            normal: {
              Farbe: (Parameter) => {
                // Jede Spalte anders färben let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'];
                wenn (params.dataIndex + 1 <= Farbliste.Länge) {
                  Farbliste zurückgeben[params.dataIndex]
                } anders {
                  // Wenn die Anzahl der Spalten das Farbarray überschreitet, beginnen Sie erneut. return colorList[params.dataIndex - colorList.length]
                }
              }
            }
          },
          Daten: Datenliste
        }]
      };
      dies.dom = echarts.init(dies.$refs.dom);
      this.dom.setOption(Option, true)
      window.addEventListener("Größe ändern", () => {
        wenn (document.getElementById('roadnum') und dies.$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';
          dies.dom.resize();
        }
      });
    }
  }
}