Français
Français
Dans le développement Web, la visualisation des données peut aider les utilisateurs à comprendre intuitivement les tendances et les modèles de données. En combinant l'interface PHP et la bibliothèque ECharts, nous pouvons facilement afficher les données back-end sous forme de graphiques statistiques dynamiques sur la page Web pour obtenir une visualisation en temps réel des données.
Avant de commencer, assurez-vous d'effectuer les préparations d'environnement suivantes :
La fonction de l'interface PHP est d'obtenir les données de la base de données et de les renvoyer au front-end au format JSON. Voici un exemple de base :
<?php
// Se connecter à la base de données
$mysqli = new mysqli("localhost", "username", "password", "database");
// Vérifier la connexion
if ($mysqli-> erreur_de connexion) {
die("Échec de la connexion à la base de données : " . $mysqli->connect_error);
}
// Requête de données $query = "SELECT * FROM data_table";
$result = $mysqli->query($query);
// Convertir au format JSON $data = [];
while ($row = $result->fetch_assoc()) {
$données[] = $ligne ;
}
//Retour de l'en-tête du résultat('Content-Type: application/json');
echo json_encode($données);
// Ferme la connexion $mysqli->close();
?>Ce code se connecte à la base de données via mysqli, lit les données de la table et les renvoie au format JSON pour les appels frontaux.
La partie front-end est principalement chargée d'obtenir les données renvoyées par l'interface PHP via des requêtes Ajax, et d'utiliser ECharts pour générer des graphiques statistiques.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de visualisation de données PHP et ECharts</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width:800px;height:400px;"></div>
<script type="text/javascript">
$.ajax({
url: "api.php",
type: "GET",
dataType: "json",
success: function(data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(item => item.value),
type: 'bar'
}]
};
chart.setOption(option);
}
});
</script>
</body>
</html>Cette page HTML appelle l'interface PHP via la fonction Ajax de jQuery. Après avoir obtenu les données avec succès, il génère dynamiquement un histogramme ECharts pour obtenir une visualisation frontale des données back-end.
Dans la base de données, il est recommandé de créer une table de données contenant deux champs de base :
La structure des champs peut être ajustée en fonction des besoins de l'entreprise et l'instruction de requête peut être modifiée de manière synchrone dans l'interface.
Grâce à la combinaison de l'interface PHP et d'ECharts, les développeurs peuvent réaliser efficacement l'affichage de la visualisation des données. Lisez les données de la base de données principale, puis restituez-les dynamiquement via les ECharts frontaux pour créer une page de graphique statistique entièrement fonctionnelle et hautement interactive. Cette méthode convient à divers scénarios d'application Web tels que l'affichage de rapports, l'analyse commerciale et les systèmes de surveillance.
