Maison >développement back-end >tutoriel php >Comment afficher des graphiques statistiques en temps réel via les interfaces ECharts et PHP

Comment afficher des graphiques statistiques en temps réel via les interfaces ECharts et PHP

WBOYoriginal: 2023-12-17 16:35:431210parcourir

Avec le développement rapide d'Internet et de la technologie du Big Data, la visualisation des données est devenue un élément important. En tant qu'excellente bibliothèque de visualisation de données JavaScript open source, ECharts peut nous aider à afficher divers graphiques statistiques de manière simple et efficace. Cet article expliquera comment afficher des graphiques statistiques en temps réel via les interfaces ECharts et PHP, et fournira des exemples de code pertinents.

1. Préparation
Avant de commencer, nous devons faire quelques préparatifs :

Installer la bibliothèque ECharts : Vous pouvez télécharger la dernière version de la bibliothèque ECharts depuis le site officiel d'ECharts (http://echarts.apache. org/), et introduisez-le dans le projet.
Installer l'environnement PHP : nous devons créer un environnement PHP simple pour fournir une interface de données. Vous pouvez installer un environnement de développement intégré tel que XAMPP ou WAMP, ou créer un environnement LAMP sur un serveur Linux.

2. Créer une base de données et un tableau de données
Pour faciliter la démonstration, nous utilisons ici un exemple simple, en supposant que nous souhaitons afficher le nombre de commandes par heure. Tout d’abord, nous devons créer une table de données dans la base de données MySQL pour enregistrer les données de commande.

CREATE TABLE `orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `time` datetime DEFAULT NULL,
  `count` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Ce tableau contient trois champs, à savoir l'identifiant de la commande, l'heure de la commande et la quantité commandée.

3. Écrire l'interface PHP
Créez un nouveau fichier nommé "api.php" dans le projet PHP pour gérer la logique de l'interface de données. Grâce à cette interface, nous pouvons obtenir les dernières données de commande. Voici un exemple simple :

<?php
// 引入数据库配置文件
include('config.php');

// 连接数据库
$conn = mysqli_connect($db_host, $db_user, $db_password, $db_name);
if (!$conn) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 获取最新的订单数据
$sql = "SELECT * FROM orders ORDER BY time DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);

// 返回JSON格式的订单数据
echo json_encode($row);

// 关闭数据库连接
mysqli_close($conn);
?>

Ce code se connecte d'abord à la base de données, puis interroge les dernières données de commande et les renvoie au format JSON.

4. Écrivez la page front-end
Ensuite, nous devons introduire la bibliothèque ECharts dans la page front-end et réaliser l'affichage de graphiques statistiques en temps réel. Supposons que nous nommions la page "index.php". Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实时统计图展示</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 统计图容器 -->
    <div id="chart" style="height: 400px;"></div>

    <!-- JavaScript代码 -->
    <script>
        // 创建ECharts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 定义初始数据
        var data = [];

        // 请求接口获取数据
        function fetchData() {
            // 发送HTTP请求
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var result = JSON.parse(xmlhttp.responseText);
                    var time = new Date(result.time);
                    var count = result.count;

                    // 更新数据
                    data.push({
                        name: time.getHours() + ':00',
                        value: count
                    });

                    // 显示统计图
                    myChart.setOption({
                        xAxis: {
                            data: data.map(function(item) {
                                return item.name;
                            })
                        },
                        series: [{
                            data: data.map(function(item) {
                                return item.value;
                            })
                        }]
                    });
                }
            };
            xmlhttp.open("GET", "api.php", true);
            xmlhttp.send();
        }

        // 循环调用接口，以实现实时刷新
        setInterval(fetchData, 1000);
    </script>
</body>
</html>

Ce code HTML introduit d'abord la bibliothèque ECharts et crée un conteneur dans la page pour afficher des graphiques statistiques. Ensuite, via le code JavaScript, l'interface de requête HTTP est implémentée, les dernières données de commande sont obtenues et ajoutées aux données, et enfin la méthode setOption d'ECharts est utilisée pour afficher le graphique statistique. Afin d'obtenir l'effet de rafraîchissement en temps réel, nous utilisons la fonction setInterval de JavaScript pour appeler l'interface toutes les secondes.

5. Exécutez le projet
Ouvrez la page "index.php" dans le navigateur pour voir l'affichage des graphiques statistiques en temps réel. Chaque seconde, la page enverra une requête au backend pour obtenir les dernières données de commande et les ajouter au graphique pour l'affichage.

Résumé : Grâce à l'introduction de cet article, nous avons appris à afficher des graphiques statistiques en temps réel via les interfaces ECharts et PHP. En obtenant constamment les dernières données et en mettant à jour les graphiques, nous sommes en mesure de surveiller et d'afficher les modifications des données en temps réel. Cela a des implications importantes pour l’analyse des données et la prise de décision commerciale.

(Remarque : les exemples de code ci-dessus sont uniquement à titre de référence, l'implémentation spécifique sera ajustée en fonction de la situation réelle)

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 JavaScript mysql json echarts html 接口数据库 apache 数据分析 http linux

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：PHP et WebSocket : la solution parfaite pour une communication instantanéeArticle suivant：PHP et WebSocket : la solution parfaite pour une communication instantanée

Articles Liés

Voir plus