Français
Français
À l'ère de l'information d'aujourd'hui, l'analyse et la visualisation des données sont devenues une partie indispensable de toutes les industries. Pour le développement Web, la combinaison de PHP en tant que langue backend et Vue.js en tant que cadre frontal est non seulement largement utilisée, mais améliore également l'efficacité et la flexibilité du développement. Cet article présentera comment combiner PHP et VUE.js pour utiliser des graphiques statistiques pour réaliser l'analyse visuelle des données.
En tant que langage de script côté serveur, PHP possède une large gamme de champs d'application et Vue.js est un cadre frontal progressif, en particulier adapté à la création d'applications à une page. La combinaison des deux peut réaliser un développement séparé des extrémités avant et arrière, améliorant ainsi l'efficacité du développement et la flexibilité.
Avant le développement, nous devons d'abord nous assurer que l'environnement PHP est installé et que le répertoire de travail est prêt. Dans le même temps, Vue.js et certaines bibliothèques de visualisation de données couramment utilisées sont également nécessaires. Voici plusieurs bibliothèques couramment utilisées et leurs commandes d'installation:
Dans le répertoire de travail, créez la structure du répertoire suivant:
Dans le répertoire CSS, nous créons un nouveau fichier de style.css pour définir des styles, tels que la taille du conteneur du graphique, etc.
Dans le répertoire JS, nous créons un nouveau fichier main.js pour écrire du code lié à Vue.js.
Dans le répertoire PHP, créez un fichier data.php pour simuler les données backend.
index.html sera utilisé comme fichier d'entrée du projet.
Dans le fichier data.php, nous pouvons simuler des données backend pour afficher les graphiques statistiques. Par exemple:
<?php
$data = [
['name' => 'A', 'valeur' => 100],
['name' => 'b', 'valeur' => 200],
['name' => 'c', 'valeur' => 300],
['name' => 'd', 'valeur' => 400],
['name' => 'e', 'valeur' => 500]
]]
echo json_encode ($ data);
?>
Le code crée un tableau de données $ et les convertit au format JSON pour Vue.js pour effectuer un traitement des données.
Dans le fichier main.js, nous présentons les bibliothèques nécessaires et écrivons le code Vue.js:
Importer Vue à partir de «vue»;
importer axios à partir de «Axios»;
Importer des écharts des «écharts»;
Nouveau Vue ({
El: '#App',
données: {
Chartdata: []
},
créé () {
this.fetchData ();
},
Méthodes: {
fetchData () {
axios.get ('./ php / data.php')
.Then (réponse => {
this.chartdata = réponse.data;
this.DrawChart ();
})
.Catch (error => {
console.log (erreur);
});
},
drawChart () {
var chart = echarts.init (document.getElementById ('Chart-Container'));
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: 'Bar'
}]
};
chart.setOption (option);
}
}
});
Dans le fichier index.html, nous écrivons du code HTML et introduisons les fichiers CSS et JS requis:
<meta charset="utf-8"> <title>PHP et Vue.js Tutoriel pratique</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>
Dans HTML, nous introduisons d'abord les fichiers de bibliothèque de Vue.js, Axios et Echarts, puis créons un élément avec ID comme application, comme élément racine de Vue.js, et contient un élément avec ID en tant que contenant du graphique, qui est utilisé pour afficher le graphique.
Entrez le répertoire de travail dans le terminal et exécutez la commande suivante pour exécuter le projet:
SERVIR DE RUNE NPM
Après une exécution réussie, visitez http: // localhost: 8080 pour afficher le graphique généré.
En combinant PHP et VUE.js, nous avons réussi à implémenter la fonction de visualisation et d'analyse des données. Cet article montre comment utiliser PHP pour simuler les données backend et générer des graphiques statistiques via Vue.js et Echarts, en terminant l'analyse visuelle des données. Espérons que ce tutoriel aidera les développeurs à mieux comprendre comment mettre en œuvre la visualisation des données dans des projets réels.
