Maison > Article > développement back-end > Comment générer des graphiques statistiques adaptatifs via l'interface php et ECharts

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

PHPzoriginal: 2023-12-18 12:49:21626parcourir

Comment générer des graphiques statistiques adaptatifs via linterface php et ECharts

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

Avec le développement rapide d'Internet et l'avènement de l'ère du big data, la visualisation des données est devenue l'un des moyens importants pour nous d'obtenir et d'afficher des données. . En tant qu'excellente bibliothèque de visualisation de données, ECharts est devenu l'un des outils de choix pour de nombreux développeurs. Cet article expliquera comment générer des graphiques statistiques adaptatifs via l'interface PHP et ECharts, et fournira des exemples de code spécifiques.

Confirmez l'environnement du projet
Tout d'abord, assurez-vous que php et ECharts ont été installés dans l'environnement de votre projet. Vous pouvez obtenir les dernières versions de php et ECharts.
Préparer les données
Avant de générer des graphiques statistiques, nous devons préparer les données. Supposons que nous ayons un système de gestion des étudiants et que nous souhaitions compter la note moyenne de chaque classe. Nous interrogeons les données de la base de données et enregistrons les résultats sous forme de tableau.

<?php
$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT class, AVG(score) AS average_score FROM students GROUP BY class";
$result = $conn->query($sql);

$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = array(
        'class' => $row['class'],
        'average_score' => $row['average_score']
    );
}

$conn->close();
?>

Générer un graphique
Ensuite, nous utilisons ECharts pour générer le graphique. En PHP, nous pouvons créer un modèle HTML puis générer dynamiquement les données et les scripts requis en PHP.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计图表</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%; height: 400px;"></div>

    <script>
        // 动态生成图表数据
        var data = <?php echo json_encode($data); ?>;

        // 初始化图表
        var chart = echarts.init(document.getElementById('chart'));

        // 配置图表
        var option = {
            title: {
                text: '班级平均分数统计',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) {
                    return item.class;
                })
            },
            yAxis: {
                type: 'value',
                name: '平均分数'
            },
            series: [{
                type: 'bar',
                data: data.map(function(item) {
                    return item.average_score;
                })
            }]
        };

        // 渲染图表
        chart.setOption(option);
    </script>
</body>
</html>

Créer une interface php
Enfin, nous devons créer une interface php pour récupérer les données et les renvoyer au front-end au format json.

<?php
header('Content-Type: application/json');

$data = array(
    array('class' => 'Class A', 'average_score' => 85),
    array('class' => 'Class B', 'average_score' => 78),
    array('class' => 'Class C', 'average_score' => 92),
    // 更多数据...
);

echo json_encode($data);
?>

Ensuite, nous pouvons obtenir les données en appelant l'interface php sur le front-end et générer des graphiques à l'aide d'ECharts.

$.getJSON('data.php', function(data) {
    // 使用ECharts生成图表
    // ...
});

Grâce aux étapes ci-dessus, nous pouvons obtenir des données via l'interface php et utiliser ECharts pour générer des graphiques statistiques adaptatifs. J'espère que cet article pourra vous aider à réaliser vos besoins en visualisation de données dans votre projet.

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 echarts html 接口数据库 apache https

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 : une solution efficace pour le push de messages en temps réelArticle suivant：PHP et WebSocket : une solution efficace pour le push de messages en temps réel

Articles Liés

Voir plus