How to use ECharts and php interface to generate statistical charts

How to use ECharts and PHP interface to generate statistical charts

Introduction:
In modern web application development, data visualization is a very important link, it can Help us visually display and analyze data. ECharts is a powerful open source JavaScript chart library. It provides a variety of chart types and rich interactive functions, and can easily generate various statistical charts. This article will introduce how to use ECharts and PHP interfaces to generate statistical charts, and give specific code examples.

1. Overview
ECharts is a customizable chart library open sourced by Baidu. It supports a variety of chart types, including line charts, bar charts, pie charts, etc., and provides rich interactions and animation effects. PHP is a commonly used server-side language for processing data and interacting with databases. By combining ECharts and PHP, we can easily obtain data from the database and use it to generate statistical charts.

2. Environment preparation
Before we start, we need to install and configure the following software and libraries:

1. PHP environment: To use PHP scripts, we need to install PHP and Configure the web server (such as Apache).
2. ECharts library: Download the latest ECharts library from the ECharts official website and introduce it into the HTML page.

3. Obtain data
Before generating statistical charts, we first need to obtain data from the database. The following is a simple PHP script to connect to the database and obtain data:

// Connect to the database
$conn = mysqli_connect('localhost', 'username', 'password', 'database');
if (!$conn) {

die('数据库连接失败: ' . mysqli_connect_error());

}

// Query data
$sql = "SELECT * FROM statistics";
$result = mysqli_query($conn, $sql);

// Processing results
$data = array();
while ($row = mysqli_fetch_assoc($result)) {

$data[] = array(
    'name' => $row['name'],
    'value' => $row['value']
);

}

//Output data
echo json_encode($data);

//Close database connection
mysqli_close($conn);
?>

4. Generate statistical charts
Next, we generate statistical charts through ECharts and PHP interfaces. The following is a simple HTML page for drawing a bar chart:

<meta charset="utf-8">
<title>ECharts统计图表</title>
<script src="echarts.min.js"></script>

<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
    // 使用ajax获取数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            renderChart(data);
        }
    };
    xhr.send();

    // 渲染图表
    function renderChart(data) {
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '数据统计'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) {
                    return item.name;
                })
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: data.map(function(item) {
                    return item.value;
                })
            }]
        };

        chart.setOption(option);
    }
</script>

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