Comment générer des graphiques statistiques interactifs via l'interface php et ECharts

Comment générer des graphiques statistiques interactifs via l'interface PHP et ECharts

Introduction :
Dans la visualisation de données, les graphiques statistiques sont un moyen très efficace d'afficher des données. ECharts est une puissante bibliothèque de graphiques JavaScript open source qui prend en charge plusieurs types de graphiques et de riches fonctionnalités interactives. Cet article présentera comment générer des graphiques statistiques interactifs grâce à la combinaison de l'interface PHP et d'ECharts.

1. Installez ECharts
Tout d'abord, nous devons introduire ECharts dans le projet. L'installation peut être effectuée en suivant les étapes suivantes :

1. Télécharger ECharts : Visitez le site officiel d'ECharts (https://echarts.apache.org/zh/download.html) et téléchargez la dernière version adaptée au projet.
2. Décompressez ECharts : décompressez le package compressé téléchargé dans un emplacement approprié du projet.

3. Introduire ECharts : introduisez les fichiers ECharts dans la page HTML, par exemple :

   <script src="echarts.min.js"></script>

   Copier après la connexion

2. Créez une interface PHP
Ensuite, nous devons créer une interface PHP pour transmettre les données à ECharts pour l'affichage des graphiques. Ce qui suit est un exemple de code simple d'interface PHP :

<?php
// 数据数组
$data = [
    ['name' => 'A', 'value' => 10],
    ['name' => 'B', 'value' => 15],
    ['name' => 'C', 'value' => 20],
    ['name' => 'D', 'value' => 18],
    ['name' => 'E', 'value' => 12]
];

// 将数据转换为 JSON 格式
$jsonData = json_encode($data);

// 返回 JSON 数据
header('Content-Type: application/json');
echo $jsonData;
?>

Veuillez remplacer le tableau $data par les données qui doivent être affichées en fonction de vos besoins réels. $data 数组替换为需要展示的数据。

三、生成交互式统计图
在 HTML 页面中，我们可以使用 JavaScript 调用 PHP 接口，并通过返回的 JSON 数据生成交互式统计图。

以下是一个简单的 HTML 页面示例代码：

    
    <script src="echarts.min.js"></script>



    

    <script>
        // 使用 AJAX 请求 PHP 接口，获取数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'your_php_interface.php', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var responseData = JSON.parse(xhr.responseText);
                // 创建统计图实例
                var chart = echarts.init(document.getElementById('chart'));
                // 配置图表
                var option = {
                    title: {
                        text: '统计图表示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: responseData.map(function(item) {
                            return item.name;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '数值',
                        type: 'bar',
                        data: responseData.map(function(item) {
                            return item.value;
                        })
                    }]
                };
                // 使用配置项显示图表
                chart.setOption(option);
            }
        };
        xhr.send();
    </script>

请将 your_php_interface.php

Dans la page HTML, nous pouvons utiliser JavaScript pour appeler l'interface PHP et générer des graphiques statistiques interactifs grâce aux données JSON renvoyées.

Voici un exemple de code de page HTML simple :
rrreee

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!