Tutoriel pour l'affichage des graphiques dynamiques à l'aide de PHP et VUE combinés avec des écharts

Les graphiques montrent l'importance du développement Web moderne

Dans le développement Web actuel, l'affichage des graphiques est une fonctionnalité très pratique qui peut aider les utilisateurs à comprendre et à analyser intuitivement diverses données. Cet article vous mènera étape par étape pour comprendre comment combiner PHP avec Vue.js avec Echarts pour obtenir un affichage de graphique efficace.

Choisissez la bonne bibliothèque de graphiques - Echarts

Echarts est une bibliothèque de graphiques open source riche en fonctionnalités et facile à utiliser qui prend en charge plusieurs types de graphiques et interactions. Vous pouvez introduire Echarts via CDN ou télécharger des fichiers de bibliothèque pour le déploiement local, s'adapter de manière flexible à diverses exigences du projet.

Développement d'une interface de données backend

Utilisez PHP pour écrire une interface backend, connectez-vous à la base de données via PDO et interrogez les données, et enfin renvoyez les données au Frontend au format JSON. Voici l'exemple de code:

<?php
// Connectez-vous à la base de données
$dsn = 'mysql:host=localhost;dbname=test;charset=utf8';
$username = 'root';
$password = '';
$db = new PDO($dsn, $username, $password);

// Données de requête
$sql = 'SELECT * FROM data';
$stmt = $db-> requête ($ sql);
$ data = $ stmt-> fetchall (PDO :: fetch_assoc);

// Retourne les données d&#39;en-tête (&#39;Content-Type: Application / JSON&#39;);
echo json_encode ($ data);
?>

Ce code montre comment utiliser PDO pour se connecter à la base de données et exécuter les requêtes SQL, et enfin la sortie des données via le format JSON, qui facilite les appels frontaux.

Les composants de Vue frontaux mettent en œuvre la demande de données et le rendu des graphiques

Dans l'avant, nous utilisons Vue.js pour créer une vue, utilisons Axios pour envoyer des demandes HTTP pour obtenir les données fournies par l'interface PHP, puis appelez Echarts pour l'initialisation et le rendu des graphiques. Les exemples sont les suivants:

<template>
  <div id="app">
    <div id="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import axios from 'axios';

export default {
  mounted() {
    // envoyerHTTPDemande d&#39;obtenir des données
    axios.get('/api/data.php')
      .then(response => {
        const data = response.data;

        // Initialiser le graphique
        const chart = echarts.init(document.getElementById('chart'));
        const options = {
          // Configurer les types de graphiques et les styles en fonction des données
          // La configuration de l&#39;échantillon peut être ajustée en fonction des exigences
          xAxis: {
            type: 'category',
            data: data.map(item => item.name) // Supposer qu&#39;il y anameChamps
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data.map(item => item.value), // Supposer qu&#39;il y avalueChamps
            type: 'bar'
          }]
        };
        chart.setOption(options);
      })
      .catch(error => {
        console.error(error);
      });
  }
}
</script>

Grâce à ce composant, une fois la page chargée, les données seront automatiquement demandées et les graphiques seront rendus, prenant en charge l'affichage dynamique du contenu de données transmis par le backend.

Résumer

En combinant PHP et VUE.js pour réaliser la fonction d'affichage du graphique, il peut présenter efficacement les données arrière sous la forme d'un graphique par le biais d'une technologie frontale moderne, améliorant l'expérience utilisateur. En tant que bibliothèque de graphiques puissantes, Echarts prend en charge une variété de types de graphiques et d'interactions riches, et est idéal pour mettre en œuvre de telles fonctionnalités. J'espère que ce contenu de l'article peut vous aider à créer rapidement votre propre tableau de données dynamique.