So führen Sie Echarts in vue3 ein

Was ist Echarts?

Echarts ist eine beliebte Diagramm- und Datenvisualisierungsbibliothek

Offizielle Website: Apache ECharts

Führen Sie Echarts in vue3 ein. Die Schritte sind wie folgt:

1. Installieren Sie Echarts und vue-echarts

npm install echarts vue-echarts

2. Importieren Sie Echarts und Vue-Echarts

import * as echarts from 'echarts'
import { useECharts } from 'vue-echarts'

3. Registrieren Sie sich als globale Komponente

app.component('v-chart', useECharts(echarts))

4. Verwenden Sie die Komponente und initialisieren Sie das Diagramm

<v-chart :options="options" />

data() {
  return {
    options: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
  }
}

5. Vollständiges Beispiel

<div id="app">
  <v-chart :options="options" />
  <button @click="update">Update</button>
</div>

import { createApp } from 'vue'
import * as echarts from 'echarts'
import { useECharts } from 'vue-echarts'

const app = createApp({
  methods: {
    update() {
      this.options.series[0].data = [...this.options.series[0].data, 100]
    }
  },
  data() {
    return {
      options: { /*  */ }
    }
  } 
})

app.component('v-chart', useECharts(echarts))

const vm = app.mount('#app') 
setInterval(() => {
  vm.update() 
}, 1000)

Dadurch wird auf der Seite ein Echarts-Diagramm gerendert, dessen Daten jede Sekunde aktualisiert werden.

Zusammenfassend sind die wichtigsten Schritte zur Einführung von Echarts in vue3:

1. Installieren Sie Echarts und vue-echarts.
2. Importieren Sie Echarts und vue-echarts.
3. Registrieren Sie Echarts-Komponenten.
4. Verwenden Sie Komponenten in der Vorlage und übergeben Sie Initialisierungsoptionen.
5. Aktualisieren Sie das Diagramm, indem Sie Optionen aktualisieren