使用PHP接口結合ECharts實現動態數據可視化圖表的實戰教程

M66 2025-11-05

PHP與ECharts實現數據可視化的思路

在Web開發中，數據可視化能夠幫助用戶直觀地理解數據趨勢和規律。通過結合PHP接口與ECharts庫，我們可以輕鬆地將後端數據以動態統計圖的形式展示在網頁中，實現數據的實時可視化。

項目準備

在開始之前，請確保完成以下環境準備：

服務器環境中已安裝並配置PHP。
數據庫中已有可讀取的數據表，用於存儲可視化所需的數據。
前端頁面可訪問ECharts庫文件（可通過CDN方式引入）。

創建PHP數據接口

PHP接口的作用是從數據庫中獲取數據，並以JSON格式返回給前端。下面是一個基礎示例：

<?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(&#39;Content-Type: application/json&#39;);
echo json_encode($data);

// 關閉連接$mysqli->close();
?>

該代碼通過mysqli連接數據庫，讀取表中數據並將其以JSON格式返回，供前端調用。

前端頁面與ECharts可視化展示

前端部分主要負責通過Ajax請求獲取PHP接口返回的數據，並利用ECharts生成統計圖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP與ECharts數據可視化示例</title>
    <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({
            url: "api.php",
            type: "GET",
            dataType: "json",
            success: function(data) {
                var chart = echarts.init(document.getElementById('chart'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.name)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(item => item.value),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        });
    </script>
</body>
</html>

該HTML頁面通過jQuery的Ajax函數調用PHP接口，成功獲取數據後動態生成ECharts柱狀圖，實現後端數據的前端可視化。

數據庫結構與數據準備

在數據庫中，建議建立一張包含兩個基礎字段的數據表：

name ：用於存放分類或標籤名稱。
value ：用於存放對應的數值。

可根據業務需求調整字段結構，並在接口中同步修改查詢語句。

總結

通過PHP接口與ECharts的結合，開發者可以高效地實現數據可視化展示。從後端數據庫讀取數據，再通過前端的ECharts動態渲染，構建出功能完善、交互性強的統計圖頁面。此方法適用於報表展示、業務分析、監控系統等多種Web應用場景。