Position actuelle: Accueil> Derniers articles> PHP et VUE.js implémenter la visualisation des données: tutoriel d'analyse des cartes statistiques

PHP et VUE.js implémenter la visualisation des données: tutoriel d'analyse des cartes statistiques

gitbox 2025-06-12

Introduction

À l'ère de l'information, l'analyse des données et la visualisation sont devenues des liens cruciaux dans tous les domaines de la vie. Dans le développement Web, la combinaison de PHP et Vue.js fournit aux développeurs de puissantes capacités de séparation frontale et back-end. Cet article montrera comment utiliser PHP comme backend et vue.js pour réaliser l'analyse visuelle des données via des graphiques statistiques.

1. Pourquoi choisir Php et Vue.js?

PHP est un langage de script côté serveur largement utilisé, tandis que Vue.js est un cadre JavaScript progressif pour la création d'interfaces utilisateur. L'avantage de combiner les deux est qu'il peut atteindre un modèle de développement séparé des pointes avant et arrière, améliorant ainsi l'efficacité de développement et la flexibilité du système. Vue.js est responsable de l'affichage frontal via PHP, ce qui rend le processus de développement plus efficace et plus facile à entretenir.

2. Travail de préparation

Avant de commencer le développement, assurez-vous que l'environnement PHP est installé et que le répertoire de travail du projet est créé. Ensuite, utilisez NPM pour installer Vue.js et les bibliothèques de visualisation de données couramment utilisées, y compris Echarts et Axios. Voici les commandes d'installation de la bibliothèque requise:
NPM Install Vue
Installation de NPM Echarts
Axe d'installation de NPM

Iii. Structure du répertoire de projet

Créez la structure du répertoire suivant pour organiser nos fichiers de projet:
CSS /
    - style.css
JS /
    - Main.js
php /
    - data.php
index.html

  • Dans le répertoire CSS , créez un fichier style.css pour la définition de style.

  • Dans le répertoire JS , créez le fichier main.js pour écrire la logique de vue.js.

  • Dans le répertoire PHP , créez des données.php pour simuler les données backend.

  • index.html est utilisé comme fichier d'entrée du projet.

4. Préparation des données

Dans le fichier `data.php`, nous pouvons simuler certaines données backend, qui seront utilisées par le frontend pour générer des graphiques statistiques. Par exemple:
<?php
$data = [
    ['name' => &#39;A&#39;, &#39;valeur&#39; ​​=> 100],
    [&#39;name&#39; => &#39;b&#39;, &#39;valeur&#39; ​​=> 200],
    [&#39;name&#39; => &#39;c&#39;, &#39;valeur&#39; ​​=> 300],
    [&#39;name&#39; => &#39;d&#39;, &#39;valeur&#39; ​​=> 400],
    [&#39;name&#39; => &#39;e&#39;, ​​&#39;valeur&#39; ​​=> 500]
]]
echo json_encode ($ data);
?>

Le code ci-dessus convertit un tableau contenant des noms et des valeurs au format JSON via la méthode JSON_ENCODE et simule les données renvoyées au frontal.

Code Vue.js

Dans le fichier `main.js`, introduisez d'abord la bibliothèque requise et écrivez le code pour vue.js:
Importer Vue à partir de «vue»;
importer axios à partir de «Axios»;
Importer des écharts des «écharts»;

Nouveau Vue ({
   El: &#39;#App&#39;,
   données: {
       Chartdata: []
   },
   créé () {
       this.fetchData ();
   },
   Méthodes: {
       fetchData () {
           axios.get (&#39;./ php / data.php&#39;)
               .Then (réponse => {
                   this.chartdata = réponse.data;
                   this.DrawChart ();
               })
               .Catch (error => {
                   console.log (erreur);
               });
       },
       drawChart () {
           var chart = echarts.init (document.getElementById (&#39;Chart-Container&#39;));
           Var Option = {
               titre: {
                   Texte: «Graphique statistique»
               },
               xaxis: {
                   Type: «catégorie»,
                   Données: this.chartdata.map (item => item.name)
               },
               Yaxis: {
                   Type: «valeur»
               },
               série: [{
                   Données: this.chartdata.map (item => item.value),
                   Type: &#39;Bar&#39;
               }]
           };
           chart.setOption (option);
       }
   }
});

Ce code obtient des données backend via Axios et utilise des écharts pour générer des graphiques à barres.

6. Code de page HTML

Dans `index.html`, nous introduisons les fichiers CSS et JS requis et créons l'élément racine de Vue.js:
<meta charset="utf-8">
<title>Tutoriels pratiques PHP et VUE.JS</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="./js/main.js"></script>
<div id="app">
    <div id="chart-container"></div>
</div>

Dans HTML, nous créons un

L'élément sert de nœud racine de Vue et a été ajouté
Utilisé pour montrer le graphique.

7. Exécutez le projet

Entrez le répertoire du projet dans le terminal et exécutez la commande suivante pour démarrer le projet:
SERVIR DE RUNE NPM

Après une exécution réussie, visitez http: // localhost: 8080 pour afficher le graphique généré.

8. Résumé

Grâce à ce tutoriel, nous montrons comment combiner les cadres PHP et VUE.js pour implémenter les fonctions d'analyse visuelle de données. Simuler les données backend via PHP et générer des graphiques statistiques à l'aide des bibliothèques Vue.js et Echarts, en réalisant avec succès l'interaction des données frontales et l'affichage visuel. Espérons que cet article aidera les débutants à comprendre comment utiliser les graphiques pour afficher les résultats de l'analyse des données et maîtriser cette compétence.
Connexe