Vue echarts realisiert die dynamische Anzeige von Balkendiagrammen

<Vorlage>
  <div Klasse="dan">
    <div id="Skalengröße" :style="{width: '100%', height: '100%'}"></div>
  </div>
</Vorlage>
<Skript>
E-Charts aus „E-Charts“ importieren;
Standard exportieren {
  Daten() {
    zurückkehren {
      Texte: 111
    };
  },
  montiert() {
    dies.drawLine();
  },
  Methoden: {
    zeichneLinie() {
      // Initialisieren Sie die Echarts-Instanz basierend auf dem vorbereiteten Dom. Let myChart = this.$echarts.init(document.getElementById("scalesize"));
      var fanfa = [
        {
          Name: "Setzlingsbasis",
          Typ: "Bar",
          Balkenbreite: "15%",
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  Versatz: 0,
                  Farbe: "#fccb05"
                },
                {
                  Versatz: 1,
                  Farbe: "#f5804d"
                }
              ]),
              Balkengrenzradius: 12
            }
          },
          Daten: [100, 120, 160, 180, 220, 400]
        },
        {
          Name: "Pflanzbasis",
          Typ: "Bar",
          Balkenbreite: "15%",
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  Versatz: 0,
                  Farbe: "#8bd46e"
                },
                {
                  Versatz: 1,
                  Farbe: "#09bcb7"
                }
              ]),
              Balkengrenzradius: 11
            }
          },
          Daten: [270, 320, 420, 650, 821,907]
        },
        {
          Name: "Gehosteter Bereich",
          Typ: "Bar",
          Balkenbreite: "15%",
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  Versatz: 0,
                  Farbe: "#248ff7"
                },
                {
                  Versatz: 1,
                  Farbe: "#6851f1"
                }
              ]),
              Balkengrenzradius: 11
            }
          },
          Daten: [140, 180, 215, 320, 396, 520]
        },
        {
          Name: „Gemeinsame Baubasis“,
          Typ: "Bar",
          Balkenbreite: "15%",
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  Versatz: 0,
                  Farbe: "#B88080"
                },
                {
                  Versatz: 1,
                  Farbe: "#983A3A"
                }
              ]),
              Balkengrenzradius: 11
            }
          },
          Daten: [140, 180, 215, 320, 396, 420]
        }
      ];
      myChart.setOption({
        Tooltip: {
          Auslöser: "Achse",
          Achsenzeiger:
            // Achsenindikator, Achsentrigger gültiger Typ: „shadow“ // Standard ist eine gerade Linie, optional: „line“ | „shadow“
          }
        },
        Netz: {
          links: "2%",
          rechts: "4%",
          unten: "14%",
          oben: "16%",
          containLabel: wahr
        },
        Legende: {
          Daten: ["Sämlingsbasis", "Pflanzbasis", "Treuhandfläche", "gemeinsame Baubasis"],
          rechts: 10,
          oben: 12,
          Textstil: {
            Farbe: "#fff"
          },
          Artikelbreite: 12,
          Artikelhöhe: 10
          //Artikellücke: 35
        },
        x-Achse:
          Typ: "Kategorie",
          Daten: [
            "2014",
            "2015",
            "2016",
            "2017",
            "2018",
            "2019"
          ],
          Achsenlinie: {
            Linienstil:
              Farbe: "weiß"
            }
          },
          Achsenbezeichnung: {
            // Intervall: 0,
            // drehen: 40,
            Textstil: {
              Schriftfamilie: „Microsoft YaHei“
            }
          }
        },
        yAchse: {
          Typ: "Wert",
          Achsenlinie: {
            anzeigen: falsch,
            Linienstil:
              Farbe: "weiß"
            }
          },
          geteilte Zeile: {
            zeigen: wahr,
            Linienstil:
              Farbe: "rgba(255,255,255,0.3)"
            }
          },
          Achsenbezeichnung: {}
        },
        DatenZoom: [
          {
            zeigen: wahr,
            Höhe: 12,
            xAchsenIndex: [0],
            unten: "8%",
            Griffsymbol:
              "Pfad://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            Griffgröße: "110%",
            handleStyle: {
              Farbe: "#d3dee5"
            },
            Textstil: {
              Farbe: "#fff"
            },
            Rahmenfarbe: "#90979c"
          },
          {
            Typ: "innen",
            zeigen: wahr,
            Höhe: 15,
            Anfang: 1,
            Ende: 35
          }
        ],
        Serie: Fanfa
      });
      lass app = {
        aktuellerIndex: -1
      };
      setzeIntervall(Funktion() {
        sei dataLen = fanfa[1].data.length;
        // Das zuvor markierte Diagramm abbrechen myChart.dispatchAction({
          Typ: "herunterspielen",
          SerienIndex: 0,
          Datenindex: app.aktuellerIndex
        });
        app.currentIndex = (app.currentIndex + 1) % Datenlänge;
        //Konsole.log(App.aktuellerIndex);
        //Aktuellen Graphen hervorhebenmyChart.dispatchAction({
          Typ: "Hervorhebung",
          SerienIndex: 0,
          Datenindex: app.aktuellerIndex
        });
        // Tooltip anzeigen
        meinChart.dispatchAction({
          Typ: "showTip",
          SerienIndex: 0,
          Datenindex: app.aktuellerIndex
        });
      }, 1000);
      Fenster.onresize = meinChart.resize;
    }
  }
};
</Skript>
<style lang="less" scoped>
.dan {
  Höhe: 90%;
}
</Stil>