Comment utiliser Vue pour créer des systèmes de visualisation et de surveillance des données ?

À mesure que l'analyse des données devient de plus en plus importante pour les entreprises et les organisations, la demande de systèmes de visualisation et de surveillance des données augmente également. En tant que framework frontal populaire, Vue peut bien implémenter la construction de systèmes de visualisation et de surveillance des données. Cet article expliquera comment utiliser Vue pour créer un tel système.

1. Système de visualisation de données

Le système de visualisation de données est le processus de transformation des données en tableaux, graphiques et autres éléments visuels. Vue peut organiser ces éléments dans des tableaux de bord de données interactifs et faciles à comprendre, aidant ainsi les utilisateurs à mieux comprendre leurs données.

1.1 Installation et configuration

Tout d'abord, vous devez installer Vue et les autres dépendances nécessaires, telles que les echarts. Vous pouvez utiliser Vue CLI pour créer un projet de base :

vue create my-project

Installer echarts :

npm install echarts

Ensuite, introduire les echarts dans le composant Vue :

import echarts from 'echarts'

1.2 Implémentation de la visualisation de données

Dans Vue, vous pouvez utiliser les options d'echarts pour créer tableau divers.

Prenons un graphique linéaire comme exemple :

<template>
  <div class="chart"></div>
</template>
 
<script>
import echarts from 'echarts'
 
export default {
  name: 'LineChart',
  props: {
    data: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      const chart = echarts.init(this.$el)
      chart.setOption({
        title: {
          text: this.title
        },
        xAxis: {
          type: 'category',
          data: this.data.labels
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.data.series,
          type: 'line'
        }]
      })
    }
  }
}
</script>
 
<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

Dans ce composant, utilisez des echarts pour dessiner un graphique linéaire. Transmettez les données au composant pour configurer les étiquettes et les données du graphique.

Le composant peut être utilisé des manières suivantes :

<template>
  <div>
    <line-chart :data="data" title="My Data"></line-chart>
  </div>
</template>
 
<script>
import LineChart from './LineChart'
 
export default {
  name: 'MyDashboard',
  components: {
    LineChart
  },
  data () {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        series: [10, 20, 30, 40, 50, 60, 70]
      }
    }
  }
}
</script>

Ce composant générera un tableau de bord contenant un graphique linéaire.

2. Système de surveillance des données

Un système de surveillance des données est un système qui collecte, vérifie et enregistre régulièrement les informations du système afin que les gestionnaires puissent obtenir un aperçu en temps réel. Dans Vue, vous pouvez utiliser les composants et les minuteries Vue pour implémenter un système de surveillance des données.

2.1 Installation et configuration

De même, certaines dépendances nécessaires doivent être installées dans Vue, telles que axios, echarts et ws. Installez-les à l'aide de la commande suivante :

npm install axios echarts ws

2.2 Implémentation de la surveillance des données

Tout d'abord, vous devez créer une connexion websocket pour recevoir des données sur le serveur. Vous pouvez utiliser l'API WebSocket pour vous connecter au serveur :

const socket = new WebSocket('ws://localhost:3000')

La bibliothèque ws est utilisée ici pour implémenter le protocole websocket.

Ensuite, utilisez une minuterie pour interroger périodiquement le serveur afin d'obtenir les dernières données :

setInterval(() => {
  axios.get('/api/data').then((response) => {
    const data = response.data
    this.updateChart(data)
  })
}, 1000)

La bibliothèque axios est utilisée ici pour obtenir les dernières données.

Vous pouvez utiliser les bibliothèques echarts et websocket dans les composants Vue pour mettre à jour les graphiques de visualisation de données en temps réel :

<template>
  <div class="chart"></div>
</template>
 
<script>
import echarts from 'echarts'
import WebSocket from 'ws'
 
export default {
  name: 'RealtimeChart',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.chart = echarts.init(this.$el)
    this.createChart()
  },
  methods: {
    createChart () {
      this.chart.setOption({
        title: {
          text: this.title
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'line'
        }]
      })
 
      const socket = new WebSocket('ws://localhost:3000')
 
      socket.onmessage = (event) => {
        const data = JSON.parse(event.data)
        this.updateChart(data)
      }
    },
    updateChart (data) {
      const axisData = (new Date()).toLocaleTimeString().replace(/^D*/,'')
 
      const series = this.chart.getOption().series[0]
      const data0 = series.data
 
      data0.shift()
      data0.push(data.value)
 
      this.chart.setOption({
        xAxis: {
          data: data0.map((item, index) => axisData)
        },
        series: [{
          data: data0
        }]
      })
    }
  }
}
</script>
 
<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

Le composant ici générera un tableau de bord de surveillance des données en temps réel.

3. Résumé

Le framework Vue fournit un grand nombre de composants et de plug-ins pour aider à développer des systèmes de visualisation et de surveillance des données. En installant les bibliothèques et composants nécessaires, les développeurs peuvent facilement créer différents types de tableaux de bord visuels et d'applications de surveillance en temps réel. Outre echarts, axios et ws, il existe de nombreuses autres bibliothèques qui peuvent être utilisées pour créer des systèmes de visualisation et de surveillance des données. Les développeurs doivent choisir l'outil le plus approprié en fonction de leurs besoins.

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!