小編給大家分享一下ECharts地圖怎么繪制和鉆取簡(jiǎn)易接口，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶(hù)提供滿(mǎn)意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶(hù)，如砂巖浮雕等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶(hù)的一致表?yè)P(yáng)。

1.地圖繪制過(guò)程原理

給定范圍邊界經(jīng)緯度數(shù)據(jù)，再給它個(gè)名字就構(gòu)成了繪制地圖的基礎(chǔ)。也就是說(shuō)，你可以繪制任意形狀的地圖版塊。

2.地圖數(shù)據(jù)生成

中國(guó)以及省市縣等地圖的基礎(chǔ)數(shù)據(jù)可以從這里生成與下載。

http://datav.aliyun.com/tools/atlas

有了地圖范圍數(shù)據(jù)，在 echarts 中通過(guò) registerMap 給這塊注冊(cè)個(gè)名字，即可為后續(xù)繪制使用，以下代碼以最簡(jiǎn)形式繪制一幅中國(guó)地圖。

$.getJSON('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (data) {
 var name = "中國(guó)地圖";
 // 注冊(cè)一個(gè)地圖名稱(chēng)
 echarts.registerMap(name, data); 
 
 var myChart = echarts.init(document.getElementById('map')); 
 var mapOption = { 
  series: [ 
  { 
   type: 'map', // 指明地圖類(lèi)型
   map: name,  // 指明取的名稱(chēng)
   label: {show:true},
   roam: true  // 可縮放
  } ]
 }; 
 myChart.setOption(mapOption, true); 
});

3.封裝形成簡(jiǎn)易接口

3.1接口定義

從使用方式與期望結(jié)果出發(fā)來(lái)定義接口。期望給定區(qū)域名稱(chēng)，指定繪制位置（DOM元素）即可完成工作。同時(shí)希望能控制是否支持鉆取，這就形成了最基礎(chǔ)的接口定義。

/** 根據(jù)名稱(chēng)加載地圖
 * @param elementId : DOM 元素ID
 * @param name  : 地圖名稱(chēng)（僅已定義的地區(qū)名稱(chēng)）
 * @param drill  : 是否支持鉆取
 */
ChinaMap.loadMap = function(elementId, name, drill) {...}

3.2接口實(shí)現(xiàn)

（1）支持多地圖圖表繪制，定義 ChartList 來(lái)記錄每個(gè)DOM元素對(duì)應(yīng)的圖表對(duì)象。

（2）支持鉆取，建立省市名稱(chēng)的層級(jí)關(guān)系，市編碼前兩位為省編碼。

ChinaMap.provinceCodes={'13':'河北','14':'山西',...}
ChinaMap.cityCodes={"石家莊市":"130100","唐山市":"130200",...}

（3）動(dòng)態(tài)加載相應(yīng)名稱(chēng)的數(shù)據(jù)繪制地圖，形如第2節(jié)中的示例。

（4）擴(kuò)展方法：取地圖層級(jí)路徑。如得到“中國(guó)-湖南-長(zhǎng)沙市”的路徑，且相應(yīng)的名稱(chēng)可點(diǎn)擊跳轉(zhuǎn)。

詳細(xì)實(shí)現(xiàn)代碼請(qǐng)?jiān)L問(wèn)：https://github.com/triplestudio/helloworld/tree/master/china_map

4.達(dá)成應(yīng)用效果

4.1可鉆取的中國(guó)地圖

使用以下代碼即可在指定的元素中繪制一幅可鉆取的中國(guó)地圖。

ChinaMap.loadMap('map', 'china', true);

方法 ChinaMap.loadMap 后會(huì)返回 echarts 圖表對(duì)象，可以進(jìn)一步進(jìn)行操作。這里，使用以下代碼在鉆取時(shí)得到層級(jí)路徑，以便達(dá)到可向上跳轉(zhuǎn)的效果。

ChinaMap.loadMap('map', 'china', true).on('click', function(param){ 
 $("#path").html(ChinaMap.formatPath('map', param.name));
});

4.2各省地圖

由于只需要指定名稱(chēng)和顯示元素ID，那么遍歷各省名稱(chēng)即可快速完成各省地圖的繪制。

for(var prov in ChinaMap.provinces){
  $("#main").append("