Vue+echarts realisiert Fortschrittsbalken-Histogramm

<Vorlage>
  <div Klasse="Inhaltsseite">
    <div Klasse="Tab-Inhalt">
      <div id="myChart1"></div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere * als E-Charts von „E-Charts“;
Standard exportieren {
    Daten() {
      zurückkehren {
        Option: {
          color: ["#157ef5"], // Farbe des Balkendiagramms festlegen textStyle: {
            Farbe: "#828282"
          },
          Tooltip: {
            Auslöser: "Achse",
            Achsenzeiger:
              Typ: "Linie"
            }
          },
          Netz: {
            links: "3%",
            rechts: "4%",
            unten: "3%",
            containLabel: wahr
          },
          x-Achse:
            Typ: "Wert",
            // X-Achse so einstellen, dass mehrere Segmente angezeigt werden min: 0,
            max: 100,
            Intervall: 50,
            AchsenTick: { anzeigen: false },
            Achsenlinie: {
              Linienstil:
                Farbe: "transparent"
              }
            }
          },
          yAchse: {
            Typ: "Kategorie",
            Daten: ["Finanzielle Einnahmen", "Hauptverwaltung Wirtschaft"],
            AchsenTick: { anzeigen: false },
            Achsenlinie: {
              Linienstil:
                Farbe: "#e0e0e0"
              }
            },
            innen: wahr,
            Textstil: {
              Farbe: "#000"
            }
          },
          Serie: [
            {
              Typ: "Bar",
              Artikelstil: {
                  color: "#f1f1f1", // Definiere die Hintergrundfarbe der Spalte borderRadius: [0, 10, 10, 0] // Definiere die abgerundeten Ecken der Hintergrundspalte},
              barGap: "-100%", //Wichtige Schritte zum Festlegen der Spaltenüberlappung data: [100, 100],
              animation: false, // Animationseffekt ausschalten barWidth: "22px", // Spaltenbreite festlegen},
            {
              Typ: "Bar",
              Daten: [65, 75],
              Balkenbreite: "22px",
              barGap: "-100%", //Wichtige Schritte zum Festlegen der Spaltenüberlappung itemStyle: {
                  borderRadius:[0, 10, 10, 0], // Definiere die abgerundeten Ecken der Spalte color: function(params) {
                      var Farbliste = ['#3C90EB', '#B573F4', '#F9B341', '#F9B341', '#91c7ae'];
                      Farbliste zurückgeben[params.dataIndex]
                  }
              },
            }
          ]
        }
      }
    },
    montiert() {
      dies.getChartData();
    },
    Methoden: {
      getChartData() {
        let myChart1 = echarts.init(document.querySelector("#myChart1"));
        myChart1.setOption(this.option); // Setze die Initialisierungsdaten des Diagramms setTimeout(function() {
          Fenster.onresize = Funktion() {
            myChart1.resize(); // Das Diagramm passt sich der Fenstergröße an};
        }, 200);
      }
    }
}
</Skript>

<style lang="less" scoped>
#myChart1 {
  Breite: 600px;
  Höhe: 400px;
}
</Stil>