使用ECharts結合PHP接口輕鬆生成帶標籤和圖例的統計圖

利用ECharts和PHP接口生成帶標籤和圖例的統計圖

隨著互聯網技術的發展，數據可視化已經成為數據分析和決策支持中不可或缺的一環。統計圖表作為一種直觀易懂的展示方式，得到了廣泛應用。 ECharts是一款強大且開源的圖表庫，擁有豐富的圖表類型和功能，廣受開發者青睞。

本文將結合具體示例，講解如何利用ECharts和PHP接口生成帶有標籤和圖例的統計圖。

引入ECharts資源文件

首先，需要在項目中引入ECharts相關資源。可從官方網站或GitHub獲取最新版，將其放置於項目目錄，並在HTML中引入對應的JS和CSS文件。

準備數據

在PHP端，通常通過數據庫查詢或調用API獲取數據，再轉換為JSON格式供前端使用。示例數據如下：

 $data = [
    ['name' => '圖例1', 'value' => 100],
    ['name' => '圖例2', 'value' => 200],
    ['name' => '圖例3', 'value' => 300],
    // ...
];

創建圖表容器

在HTML文件中，創建一個用於展示圖表的容器元素：

 <div id="chart" style="width: 600px; height: 400px;"></div>

初始化ECharts並繪製圖表

接著，通過JavaScript代碼初始化ECharts實例，並配置圖表：

 // 引入ECharts庫
import echarts from 'echarts';

// 獲取容器元素
var chartContainer = document.getElementById('chart');

// 初始化ECharts實例
var chart = echarts.init(chartContainer);

// 設置圖表的配置項和數據
var option = {
    title: {
        text: '統計圖表',
        subtext: '數據來源: PHP接口',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: <?=json_encode(array_column($data, 'name'))?>,
    },
    series: [
        {
            name: '標籤名稱',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: <?=json_encode($data)?>,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

// 使用剛指定的配置項和數據顯示圖表
chart.setOption(option);

實現效果解析

代碼中，先引入ECharts庫並獲取圖表容器，隨後通過echarts.init()創建圖表實例。 option對象定義了圖表的標題、提示框、圖例及系列數據。這裡使用餅圖，標籤和圖例均通過PHP接口動態生成的數據完成展示。

最後調用setOption()方法，完成圖表渲染。

總結

實現基於ECharts和PHP接口的統計圖主要步驟：

• 引入ECharts資源文件；
• 準備並轉換圖表數據為JSON格式；
• 創建圖表容器的HTML元素；
• 編寫JavaScript代碼初始化並配置圖表；
• 調用setOption()方法繪製圖表。

通過上述步驟，你可以根據需求自定義更多樣化和豐富的統計圖形，提升數據展示效果和用戶體驗。希望本文內容對你的數據可視化項目有所幫助。