Echarts世界地圖中國分區顯示

需求：在報表顯示世界地圖，國外顯示到國家，國内顯示到省份。

  分析：由于之前系統中所有的報表都是用Echarts做的，是以決定世界地圖也用Echarts來做，查了一下Echarts網方網站，貌似和地圖有關的Demo都已關閉（API尚在）；查了一些資料，發現Echarts支援的地圖大都隻顯示到國家，如下圖。很明顯不符合我們的需求，對于我這個半屌子前端，着實費了好大精力，好在查到了Echarts是可以支援自定義，這裡記錄一下，供有需求同學參考。

  

1、簡述地圖坐标加載的兩種方式

  第一種：通過動态從背景加載，這裡可以參考Echarts API文檔，這裡背景的資料要以JSON格式傳回

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
//https://echarts.baidu.com/option.html#geo.map
           

  第二種：比較簡單，就是直接在頁面上引入js檔案，這裡改造前用的是world.js，改造後用的是world_new.js檔案。

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/world.js"></script>
//<script type="text/javascript" src="js/world_new.js"></script>
           

  這裡采用引入JS的方式作示例說明，後面我會把兩個JS都附上。

2、改造world.js

  大家可以自行下載下傳world.js檔案打開看一下源碼，這裡隻拿出一行核心代碼說明，registerMap裡面的world.json就是我們要自定義的json（原world.js中world.json參數位置坐标是不包含中國省份的），這裡我們要做的就是把中國省份地理坐标加入，因為registerMap支援的是标準的geo坐标系（不了解的可自行搜尋），關于中國省份的坐标，大家可以從網上自行下載下傳china.js，很容易找到，記得要稍微轉換一下格式。

  echarts.registerMap('world', world.json);
  改造後
  echarts.registerMap('world', world_new.json);
           

改造後的效果如下：

3、打包下載下傳

連結：https://pan.baidu.com/s/1xazTcjHyGOKQsi-jyRe6eA 
提取碼：kapq 
           

  若連結莫名失效，可以留言聯系，也可以按照上述的方式自行改造一下，包中有一份世界地圖中的中國坐标供參考。

持續更新中，可以關注…