Home > Article > Backend Development > How to generate adaptive statistical charts through the php interface and ECharts

How to generate adaptive statistical charts through the php interface and ECharts

PHPzOriginal: 2023-12-18 12:49:21626browse

With the rapid development of the Internet and the arrival of the big data era, data visualization has become our way to obtain and one of the important ways to display data. As an excellent data visualization library, ECharts has become one of the tools of choice for many developers. This article will introduce how to generate adaptive statistical charts through the PHP interface and ECharts, and provide specific code examples.

Confirm the project environment
First, make sure that php and ECharts have been installed in your project environment. You can obtain the latest versions of php and ECharts.
Prepare data
Before generating statistical charts, we need to prepare the data. Suppose we have a student management system and we want to count the average score of each class. We query data from the database and save the results as an array.

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

Generate charts
Next, we use ECharts to generate charts. In PHP, we can create an HTML template and then dynamically generate the required data and scripts in 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>

Create php interface
Finally, we need to create a php interface to obtain data and return it to the front end in json format.

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

Then, we can get the data by calling the php interface on the front end and use ECharts to generate charts.

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

Through the above steps, we can obtain data through the php interface and use ECharts to generate adaptive statistical charts. I hope this article can help you realize your data visualization needs in your project.

The above is the detailed content of How to generate adaptive statistical charts through the php interface and ECharts. For more information, please follow other related articles on the PHP Chinese website!

php json echarts html 接口数据库 apache https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PHP and WebSocket: an efficient solution for real-time message pushNext article：PHP and WebSocket: an efficient solution for real-time message push

See more

How to generate adaptive statistical charts through the php interface and ECharts

Related articles