如何利用php介面和ECharts實現資料視覺化統計圖-php教程-PHP中文網

如何利用php介面和ECharts實現資料視覺化統計圖

PHPz

發布： 2023-12-17 18:02:01

原創

787 人瀏覽過

如何利用php介面和ECharts實現資料視覺化統計圖

如何利用PHP介面和ECharts實作資料視覺化統計圖

簡介
在網頁應用程式中，資料視覺化統計圖對於展示和分析大量資料非常重要。本篇文章將介紹如何利用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('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();
?>

登入後複製

以上程式碼首先透過mysqli類別連接到資料庫，並查詢名為"data_table"的資料表。然後將查詢結果轉換為一個數組，最後將數組以JSON格式傳回給前端頁面。

建立前端頁面
為了展示資料視覺化統計圖，我們需要建立一個HTML頁面，並引入ECharts函式庫和使用jQuery函式庫進行Ajax請求。以下是一個範例程式碼：

<!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>

登入後複製

以上程式碼首先引入了ECharts函式庫和jQuery函式庫，然後透過Ajax請求取得資料。接著，建立一個ECharts實例，並在成功取得資料後配置圖表選項。最後，使用配置項目顯示圖表。