Comment créer de superbes graphiques de surveillance des données en temps réel à l'aide de Vue et ECharts4Taro3

Comment créer de superbes graphiques de surveillance des données en temps réel à l'aide de Vue et ECharts4Taro3

Introduction :
Avec la demande croissante d'analyse de données et de surveillance en temps réel, nous avons besoin d'une méthode simple et puissante pour afficher les tendances changeantes et les résultats d'analyse des données réelles. -données temporelles. Vue et ECharts4Taro3 peuvent très bien répondre à ce besoin. Cet article expliquera comment utiliser Vue et ECharts4Taro3 pour créer de superbes graphiques de surveillance des données en temps réel et fournira des exemples de code pertinents.

1. Préparation de l'environnement
Avant de commencer, nous devons installer certaines dépendances nécessaires. Tout d’abord, assurez-vous que Node.js et npm sont installés. Ensuite, exécutez la commande suivante sur la ligne de commande pour installer Vue et ECharts4Taro3 :

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. Créez un composant de surveillance des données en temps réel
Dans le projet créé, nous pouvons commencer à écrire le code du composant de surveillance des données en temps réel. Tout d'abord, créez un fichier nommé RealTimeChart.vue dans le dossier src/components, puis ajoutez-y le code suivant :

<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>

Ce code crée un composant nommé RealTimeChart, qui utilise l'API de composition de Vue 3 pour gérer l'état et le cycle de vie des composants. Dans la fonction de configuration, nous utilisons useEChart pour initialiser le graphique ECharts et lier la configuration du graphique à l'instance de graphique.

3. Graphique de configuration
Dans l'étape précédente, nous avons introduit un objet de configuration nommé chartOptions. Nous devons créer un fichier chartOptions.js dans le même répertoire et y ajouter le code suivant :

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: []
    }
  ]
}

Dans cet objet de configuration, nous définissons le titre, les informations d'invite, l'axe de coordonnées, etc. Dans le même temps, nous définissons également les données de série du graphique. Nous prenons ici les données 1, les données 2 et les données 3 comme exemples.

4. Mettez à jour le graphique à l'aide de données en temps réel
Dans le code précédent, nous avons transmis un objet de configuration nommé ecOptions à la troisième position du paramètre echarts.init, mais l'attribut data de l'objet est un tableau vide. Ensuite, nous mettrons à jour le graphique avec des données en direct. Ajoutez le code suivant dans la fonction de configuration du composant RealTimeChart :

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)

Ce code définit une minuterie pour mettre à jour les données toutes les secondes. Nous ajoutons de nouveaux points de données au graphique via la méthode addData et mettons à jour les données en abscisse via la méthode setOption.

5. Utilisez des données en temps réel pour surveiller les graphiques
Désormais, nous pouvons utiliser le composant RealTimeChart dans d'autres composants pour afficher des données en temps réel. Ajoutez le code suivant dans le fichier App.vue :

<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>

Exécutez le code :
Exécutez la commande suivante dans la ligne de commande pour exécuter le code :

npm run serve

Conclusion :
Grâce aux étapes ci-dessus, nous avons utilisé avec succès Vue et ECharts4Taro3 pour créez un magnifique graphique de surveillance des données en temps réel. En mettant constamment à jour les données et en ajustant la configuration des graphiques, nous pouvons obtenir des graphiques de surveillance des données plus riches et plus diversifiés. J'espère que cet article vous sera utile et j'espère que vous pourrez explorer davantage les fonctions puissantes de Vue et ECharts4Taro3 et créer des graphiques de données en temps réel plus époustouflants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!