So erstellen Sie mit Vue und ECharts4Taro3 wunderschöne Echtzeit-Datenüberwachungsdiagramme

So erstellen Sie wunderschöne Echtzeit-Datenüberwachungsdiagramme mit Vue und ECharts4Taro3

Einführung:
Angesichts der steigenden Nachfrage nach Datenanalyse und Echtzeitüberwachung benötigen wir eine einfache und leistungsstarke Methode, um die sich ändernden Trends und Analyseergebnisse realer Daten anzuzeigen -Zeitdaten. Vue und ECharts4Taro3 können diesen Bedarf sehr gut decken. In diesem Artikel wird erläutert, wie Sie mit Vue und ECharts4Taro3 schöne Echtzeit-Datenüberwachungsdiagramme erstellen und relevante Codebeispiele bereitstellen.

1. Umgebungsvorbereitung
Bevor wir beginnen, müssen wir einige notwendige Abhängigkeiten installieren. Stellen Sie zunächst sicher, dass Node.js und npm installiert sind. Führen Sie dann den folgenden Befehl in der Befehlszeile aus, um Vue und ECharts4Taro3 zu installieren:

npm install -g @vue/cli
vue create my-project
cd my-project
vue add @tarojs/vue
npm install echarts4taro3 @tarojs/taro@3.3.10 @tarojs/cli@3.3.10

2. Erstellen Sie eine Echtzeit-Datenüberwachungskomponente
Im erstellten Projekt können wir mit dem Schreiben des Codes für die Echtzeit-Datenüberwachungskomponente beginnen. Erstellen Sie zunächst eine Datei mit dem Namen RealTimeChart.vue im Ordner src/components und fügen Sie dann den folgenden Code hinzu:

<template>
  <view class="real-time-chart"></view>
</template>

<script>
import { ecOptions } from './chartOptions'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useEChart } from 'echarts4taro3'

export default {
  setup() {
    const chartInstance = ref(null)

    useEChart(
      chartInstance,
      echarts.init,
      ecOptions
    )

    onMounted(() => {
      chartInstance.value.init()
    })

    return {}
  }
}
</script>

<style>
.real-time-chart {
  width: 100%;
  height: 100%;
}
</style>

Dieser Code erstellt eine Komponente mit dem Namen RealTimeChart, die die Composition API von Vue 3 verwendet, um den Komponentenstatus und den Lebenszyklus zu verwalten. In der Setup-Funktion verwenden wir useEChart, um das ECharts-Diagramm zu initialisieren und die Diagrammkonfiguration an die Diagramminstanz zu binden.

3. Konfigurationsdiagramm
Im vorherigen Schritt haben wir ein Konfigurationsobjekt namens chartOptions eingeführt. Wir müssen eine chartOptions.js-Datei im selben Verzeichnis erstellen und den folgenden Code hinzufügen:

export const ecOptions = {
  title: {
    text: '实时数据监控图表'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['数据1', '数据2', '数据3']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数据1',
      type: 'line',
      data: []
    },
    {
      name: '数据2',
      type: 'line',
      data: []
    },
    {
      name: '数据3',
      type: 'line',
      data: []
    }
  ]
}

In diesem Konfigurationsobjekt definieren wir den Titel, die Eingabeaufforderungsinformationen, die Koordinatenachse usw. des Diagramms. Gleichzeitig definieren wir auch die Reihendaten des Diagramms. Hier nehmen wir Daten 1, Daten 2 und Daten 3 als Beispiele.

4. Aktualisieren Sie das Diagramm mithilfe von Echtzeitdaten. Im vorherigen Code haben wir ein Konfigurationsobjekt namens ecOptions an der dritten Parameterposition von echarts.init übergeben, aber das Datenattribut des Objekts ist ein leeres Array. Als Nächstes aktualisieren wir das Diagramm mit Live-Daten. Fügen Sie den folgenden Code in der Setup-Funktion der RealTimeChart-Komponente hinzu:

const { addData } = chartInstance.value

// 模拟1秒钟更新一次数据
setInterval(() => {
  const now = new Date()
  const data1 = Math.random() * 100
  const data2 = Math.random() * 100
  const data3 = Math.random() * 100

  addData([
    [0, data1],
    [1, data2],
    [2, data3],
  ])

  chartInstance.value.setOption({
    xAxis: {
      data: [now.getHours(), now.getMinutes(), now.getSeconds()]
    }
  })
}, 1000)

Dieser Code legt einen Timer fest, um die Daten jede Sekunde zu aktualisieren. Wir fügen dem Diagramm über die Methode addData neue Datenpunkte hinzu und aktualisieren die Abszissendaten über die Methode setOption.

5. Echtzeitdaten zur Überwachung von Diagrammen verwenden

Jetzt können wir die RealTimeChart-Komponente in anderen Komponenten verwenden, um Echtzeitdaten anzuzeigen. Fügen Sie den folgenden Code in die App.vue-Datei ein:

<template>
  <view class="container">
    <real-time-chart></real-time-chart>
  </view>
</template>

<script>
import RealTimeChart from './components/RealTimeChart'

export default {
  components: {
    RealTimeChart
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Führen Sie den Code aus:

Führen Sie den folgenden Befehl in der Befehlszeile aus, um den Code auszuführen:

npm run serve

Fazit:

Durch die oben genannten Schritte haben wir Vue und ECharts4Taro3 erfolgreich verwendet Erstellen Sie ein schönes Echtzeit-Datenüberwachungsdiagramm. Durch die ständige Aktualisierung der Daten und die Anpassung der Diagrammkonfigurationen können wir umfangreichere und vielfältigere Datenüberwachungsdiagramme erstellen. Ich hoffe, dieser Artikel ist hilfreich für Sie und ich hoffe, dass Sie die leistungsstarken Funktionen von Vue und ECharts4Taro3 weiter erkunden und beeindruckendere Echtzeit-Datendiagramme erstellen können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Vue und ECharts4Taro3 wunderschöne Echtzeit-Datenüberwachungsdiagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!