Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren

Vue von „vue“ importieren
App aus „./App.vue“ importieren
const echarts = erfordern("echarts")
Vue.prototype.$echarts = echarts
Vue.config.productionTip = falsch

neuer Vue({
  rendern: h => h(App),
}).$mount('#app')

<Vorlage>
  <div id="app">
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  montiert() {
    dies.eachartsInit()
  },
  Methoden: {
    eachartsInit() {
      let myEcharts = this.$echarts.init(document.getElementById("app"))
      let-Option = {
        Legende: {
          Daten: ["Ziel 1", "Fester Typ", "Ziel 2", "Ziel 3"] //Zeige, wie viele Zeilen es gibt, die eins zu eins den Elementen des Serien-Arrays entsprechen},
        Netz: {
          unten: „20 %“, //Steuert den Abstand zwischen der Unterseite des gesamten Diagramms und der Breite des externen Containers: 800, //
          Höhe:500
        },
        Tooltip: {
          Trigger: "axis", //Maus über die Linie bewegen, um die Daten der X-Achse anzuzeigen axisPointer: {
            Typ: "Kreuz", //Steuert die Anzeige der Datenbeschriftung der Y-Achse: {
              backgroundColor: "#6a7985" //Wenn die Maus zu diesem Punkt bewegt wird, füge den Koordinaten der Koordinatenachse eine Hintergrundfarbe hinzu}
          }
        },
        x-Achse:
          Typ: "Kategorie", //Die möglichen Werte sind Zeit, Wert, Protokoll, Kategorie. Kategorie wird für diese Art von Streuliniendiagramm verwendet //Der Koordinatenwert der X-Achsendaten: ["2021.10.28 09:17:34", "2021.10.28 09:20:35", "2021.10.28 09:20:50", "2021.10.28 09:21:05", "2021.10.28 09:22:34", "2021.10.28 09:25:34"],

          //Hier steuert die Schriftrotation der X-Achsenkoordinate (gegen den Uhrzeigersinn)
          Achsenbezeichnung: {
            rotate: 45, //Drehgrad color: "red", //Steuert die Schriftfarbe der X-Achsen-Koordinate fontWeight: 600 //Steuert die Fettschrift}
          
        },
        //Konfiguration der y-Achse. Hier muss y nur den Wert anzeigen und der Typ verwendet den Wert.
        yAchse: {
          Typ: "Wert"
        },
        //
        Serie: [
          //4 Array-Elemente entsprechen 4 Zeilen {
            Daten: [820, 750, 450, 560, 650, 660], // Der Wert, der jedem X-Koordinatentyp entspricht: "Linie", // Anzeigetypname: "Ziel 1", // Der Wert des Namensattributs wird aus dem Datenarray-Element in der Legende übernommen glatt: true // Ob eine Glättung durchgeführt werden soll },
          {
            Daten: [220, 450, 350, 760, 680, 560],
            Typ: "Linie",
            Name: "Ziel 2",
            glatt: wahr
          },
          {
            Daten: [352, 550, 370, 560, 420, 590],
            Typ: "Linie",
            Name: "Fester Typ",
            glatt: wahr
          },
          {
            Daten: [522, 345, 450, 458, 592, 485],
            Typ: "Linie",
            Name: "Ziel 3",
            glatt: wahr
          }
        ]
      }

      myEcharts.setOption(option) // Übergeben Sie die Konfigurationsoption an die generierte Echarts-Instanz
    }
  }
}
</Skript>

<Stil>
#app{
  Breite: 850px;
  Höhe: 600px;
}
</Stil>