Maison > Article > développement back-end > Comment utiliser l'interface PHP et ECharts pour réaliser un graphique statistique de visualisation de données

Comment utiliser l'interface PHP et ECharts pour réaliser un graphique statistique de visualisation de données

PHPzoriginal: 2023-12-17 17:59:35711parcourir

Comment utiliser linterface PHP et ECharts pour réaliser un graphique statistique de visualisation de données

Comment utiliser l'interface PHP et ECharts pour implémenter des graphiques de visualisation de données

Introduction
Dans les applications Web, les graphiques de visualisation de données sont très importants pour afficher et analyser de grandes quantités de données. Cet article présentera comment utiliser l'interface PHP et la bibliothèque ECharts pour implémenter des graphiques statistiques de visualisation de données et fournira aux lecteurs des exemples de code spécifiques.

Prérequis
Avant de commencer, nous devons nous assurer que les prérequis suivants sont remplis :
L'environnement d'exécution PHP est installé.
Une base de données est construite sur le serveur pour stocker les données et dispose d'un tableau de données lisible.
La bibliothèque ECharts est installée et le package d'installation peut être téléchargé localement via CDN ou depuis le site officiel.
Créer une interface PHP
L'interface PHP sera utilisée pour lire les données de la base de données et les renvoyer à la page front-end au format JSON. Voici un exemple de code simple :

<?php
// 连接数据库
$mysqli = new mysqli("localhost", "username", "password", "database");

// 检查连接是否成功
if ($mysqli->connect_error) {
    die("数据库连接失败：" . $mysqli->connect_error);
}

// 查询数据
$query = "SELECT * FROM data_table";
$result = $mysqli->query($query);

// 将结果转换为JSON格式
$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 返回结果
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();
?>

Le code ci-dessus se connecte d'abord à la base de données via la classe mysqli et interroge la table de données nommée "data_table". Les résultats de la requête sont ensuite convertis en tableau, et enfin le tableau est renvoyé à la page frontale au format JSON.

Créer une page front-end
Afin d'afficher des graphiques de visualisation de données, nous devons créer une page HTML, introduire la bibliothèque ECharts et utiliser la bibliothèque jQuery pour faire des requêtes Ajax. Voici un exemple de code :

<!DOCTYPE html>
<html>
<head>
    <title>数据可视化统计图</title>
    <meta charset="utf-8">
    <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请求PHP接口获取数据
        $.ajax({
            url: "api.php",
            type: "GET",
            dataType: "json",
            success: function(data) {
                // 初始化ECharts实例
                var chart = echarts.init(document.getElementById("chart"));

                // 处理数据并设置图表选项
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.name) // 假设返回的数据中有"name"字段
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(item => item.value), // 假设返回的数据中有"value"字段
                        type: 'bar'
                    }]
                };

                // 使用配置项显示图表
                chart.setOption(option);
            }
        });
    </script>
</body>
</html>

Le code ci-dessus présente d'abord la bibliothèque ECharts et la bibliothèque jQuery, puis obtient des données via des requêtes Ajax. Ensuite, créez une instance ECharts et configurez les options du graphique après avoir récupéré avec succès les données. Enfin, utilisez les éléments de configuration pour afficher le graphique.

Préparation de la base de données et affichage des données
En fonctionnement réel, nous devons préparer les données requises pour les graphiques statistiques en fonction de nos propres besoins commerciaux et les stocker dans la base de données. Dans l'exemple de code, nous supposons qu'il existe des champs « nom » et « valeur » dans la table de données, qui stockent respectivement le nom et la valeur des données. Vous pouvez ajuster le code pour l'adapter à la structure de la table de données en fonction de vos besoins.

Après avoir terminé les étapes ci-dessus, en accédant à la page frontale, une page de visualisation de données avec des graphiques statistiques s'affichera.

Résumé
Cet article présente comment utiliser l'interface PHP et la bibliothèque ECharts pour implémenter des graphiques statistiques de visualisation de données. En créant une interface PHP, lisez les données de la base de données et renvoyez-les à la page frontale au format JSON, puis utilisez la bibliothèque ECharts pour créer des graphiques et afficher les données. J'espère que cet article pourra fournir de l'aide et des conseils aux lecteurs dans l'application de graphiques statistiques de visualisation de données dans le développement Web.

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!

php json jquery ajax echarts html mysqli 接口数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter des jeux en ligne en temps réel via PHP et WebSocketArticle suivant：Comment implémenter des jeux en ligne en temps réel via PHP et WebSocket

Articles Liés

Voir plus