需求：在報表顯示世界地圖当船，國外顯示到國家，國內(nèi)顯示到省份。
??分析：由于之前系統(tǒng)中所有的報表都是用Echarts做的碾盟，所以決定世界地圖也用Echarts來做，查了一下Echarts網(wǎng)方網(wǎng)站技竟，貌似和地圖有關(guān)的Demo都已關(guān)閉（API尚在）冰肴；查了一些資料，發(fā)現(xiàn)Echarts支持的地圖大都只顯示到國家榔组，如下圖熙尉。很明顯不符合我們的需求，對于我這個半屌子前端搓扯，著實費了好大精力检痰，好在查到了Echarts是可以支持自定義，這里記錄一下锨推，供有需求同學(xué)參考铅歼。
??
1公壤、簡述地圖坐標(biāo)加載的兩種方式
??第一種：通過動態(tài)從后臺加載，這里可以參考Echarts API文檔椎椰，這里后臺的數(shù)據(jù)要以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參數(shù)位置坐標(biāo)是不包含中國省份的）玫芦，這里我們要做的就是把中國省份地理坐標(biāo)加入，因為registerMap支持的是標(biāo)準(zhǔn)的geo坐標(biāo)系（不了解的可自行搜索）本辐，關(guān)于中國省份的坐標(biāo)桥帆，大家可以從網(wǎng)上自行下載china.js，很容易找到慎皱，記得要稍微轉(zhuǎn)換一下格式老虫。
  echarts.registerMap('world', world.json);
  改造后
  echarts.registerMap('world', world_new.json);
改造后的效果如下：
3、打包下載
鏈接：https://pan.baidu.com/s/1xazTcjHyGOKQsi-jyRe6eA
提取碼：kapq
??若鏈接莫名失效茫多，可以留言聯(lián)系祈匙，也可以按照上述的方式自行改造一下，包中有一份世界地圖中的中國坐標(biāo)供參考天揖。
