How to use php interface and ECharts to realize data visualization statistical chart-PHP Tutorial-php.cn

How to use php interface and ECharts to realize data visualization statistical chart

PHPz

Release： 2023-12-17 18:02:01

Original

786 people have browsed it

How to use php interface and ECharts to realize data visualization statistical chart

How to use PHP interface and ECharts to implement data visualization charts

Introduction
In web applications, data visualization charts are very useful for displaying and analyzing large amounts of data. important. This article will introduce how to use the PHP interface and ECharts library to implement data visualization statistical charts, and provide readers with specific code examples.

Prerequisites
Before we start, we need to ensure that the following prerequisites are met:
The PHP running environment is installed.
A database is built on the server to store data and has readable data tables.
After installing the ECharts library, you can download the installation package locally through CDN or from the official website.
Create PHP interface
The PHP interface will be used to read data from the database and return it to the front-end page in JSON format. The following is a simple sample code:

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

Copy after login

The above code first connects to the database through the mysqli class and queries the data table named "data_table". The query results are then converted into an array, and finally the array is returned to the front-end page in JSON format.

Create a front-end page
In order to display data visualization charts, we need to create an HTML page, introduce the ECharts library and use the jQuery library to make Ajax requests. The following is a sample 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>

Copy after login

The above code first introduces the ECharts library and jQuery library, and then obtains data through Ajax requests. Next, create an ECharts instance and configure chart options after successfully retrieving data. Finally, use configuration items to display the chart.

Database preparation and data display
In actual operation, we need to prepare the data required for statistical charts according to our own business needs and store them in the database. In the sample code, we assume that there are "name" and "value" fields in the data table, which store the name and value of the data respectively. You can adjust the code to fit the data table structure according to your needs.

After completing the above steps, by accessing the front-end page, a data visualization page with statistical charts will be displayed.

Summary
This article introduces how to use the PHP interface and ECharts library to implement data visualization charts. By creating a PHP interface, read data from the database and return it to the front-end page in JSON format, and then use the ECharts library to create charts and display the data. I hope this article can provide help and guidance to readers in applying data visualization statistical charts in web development.

The above is the detailed content of How to use php interface and ECharts to realize data visualization statistical chart. For more information, please follow other related articles on the PHP Chinese website!