ECharts 使用 AJAX 從數據庫獲取數據渲染地圖無顯示的調試指南

問題代碼片段

// map1.html 關鍵部分
$.ajax({
    url: "mapdata.php",
    dataType: "json",
    success: function (result) {
        myChart.hideLoading();
        myChart.setOption({
            series: [{ name: '2015年GDP', data: result }]
        });
    }
});
// 但 myChart 初始化在 require 回調中，此處 myChart 可能未定義

核心問題

1. 變量作用域錯誤：`myChart` 在 `require` 回調內部定義，AJAX 回調在外部，無法訪問該實例。
2. 數據格式不匹配：ECharts Map 系列 `data` 需 `[{name: '北京', value: 100}, ...]` 格式，PHP 返回需確認結構。
3. 異步競態：`require` 異步加載 ECharts，AJAX 可能先完成，導致 `myChart` 為 undefined。

修正方案

1. 統一在 require 回調內發起 AJAX

require(['echarts', 'echarts/chart/map'], function(ec) {
    var myChart = ec.init(document.getElementById('myChart'));
    var option = { ... }; // 基礎配置
    myChart.setOption(option); // 先渲染空地圖

    $.ajax({
        url: "mapdata.php",
        dataType: "json",
        success: function(result) {
            console.log('AJAX返回:', result); // 關鍵調試：查看真實數據結構
            if (result && result.length) {
                myChart.setOption({
                    series: [{ data: result }]
                });
            }
        },
        error: function() { alert("請求失敗"); }
    });
});

2. PHP 返回標準格式

// mapdata.php
$arr = [];
while ($row = mysql_fetch_array($query)) {
    $arr[] = ['name' => $row['province'], 'value' => (float)$row['gdp']];
}
echo json_encode($arr);

3. 必須調試步驟

• 瀏覽器 Network 面板查看 `mapdata.php` 響應：狀態碼 200、Content-Type application/json、數據結構正確。
• Console 打印 `result` 確認是否為數組、字段名匹配（`name`/`value`）。
• 檢查 ECharts 版本：v3/v4/v5 `require` 寫法不同，建議升級至 v5 使用 `import * as echarts from 'echarts'`。

常見坑

• PHP `mysql_*` 函數已棄用（PHP 7+ 移除），建議改用 `mysqli` 或 `PDO`。
• 數據庫字段 `province` 名稱需與 ECharts 內置地圖 `mapType: 'china'` 的省份名稱完全一致（如「北京市」vs「北京」）。
• 數值型 `value` 必須為 Number 類型，字符串會導致視覺映射失效。