Comment utiliser l'interface PHP et ECharts pour réaliser un graphique statistique de visualisation de données-tutoriel php-php.cn

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

PHPz

Libérer： 2023-12-17 18:02:01

original

747 Les gens l'ont consulté

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();
?>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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