ECharts世界地圖滑鼠懸停顯示國家不準確的解決方案

使用 ECharts 繪製世界地圖時，常遇到滑鼠懸停顯示的國家名稱與實際位置不符的問題。這通常是由於地圖數據（GeoJSON）與 ECharts 內部註冊的地圖名稱映射關係不匹配導致的。

問題根因

• 使用的 GeoJSON 數據中國家名稱屬性字段非標準（如使用 name、NAME、country 等不同字段）
• ECharts 註冊地圖時未正確指定 nameProperty 字段
• 地圖數據坐標系與 ECharts 默認投影不一致

解決步驟

1. 檢查 GeoJSON 數據結構

打開 GeoJSON 文件，確認國家名稱存儲在哪個屬性字段：

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "China",        // 可能是 name、NAME、ADMIN、country 等
      "iso_a3": "CHN"
    },
    "geometry": {...}
  }]
}

2. 正確註冊地圖並指定 nameProperty

$.get('world.geojson', function(geoJson) {
    echarts.registerMap('world', geoJson, {
        // 關鍵：指定屬性中對應國家名稱的字段
        nameProperty: 'name'  
    });
    
    var option = {
        series: [{
            type: 'map',
            map: 'world',
            // 其他配置...
        }]
    };
});

3. 統一國家名稱映射（推薦）

建立標準名稱映射表，確保數據與地圖一致：

var nameMap = {
    'China': '中國',
    'United States': '美國',
    'United Kingdom': '英國',
    // ... 更多映射
};

option = {
    series: [{
        type: 'map',
        map: 'world',
        nameMap: nameMap,  // 關鍵配置
        label: {
            show: true,
            formatter: function(params) {
                return nameMap[params.name] || params.name;
            }
        }
    }]
};

4. 使用官方標準地圖數據

推薦使用 ECharts 官方提供的標準地圖數據（echarts/map/js/world.js），已內置正確的 nameProperty 和標準名稱：

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>

// 直接使用，無需手動註冊
option = {
    series: [{
        type: 'map',
        map: 'world',
        nameMap: { /* 中英文映射 */ }
    }]
};

調試技巧

// 在滑鼠事件中打印實際獲取的參數
myChart.on('mouseover', function(params) {
    console.log('原始名稱:', params.name);
    console.log('數據:', params.data);
});

核心解決思路：確保 GeoJSON 的屬性字段、ECharts 註冊時的 nameProperty、數據系列中的 nameMap 三者完全一致。優先使用官方標準地圖數據可避免 90% 的此類問題。