本文記錄兩點(diǎn)：1.地圖實(shí)現(xiàn)；2.各省份地圖數(shù)據(jù)。

地圖實(shí)現(xiàn)

都開始做地圖了，echarts怎么也有點(diǎn)了解了吧，所以前兩句初始化就不多說了，不清楚的可以翻翻我以前的隨筆。代碼：

var china = document.getElementById("china");var chinaEchart = echarts.init(china);

然后是一句增強(qiáng)用戶體驗的代碼，功能是當(dāng)數(shù)據(jù)量大，不能一下子刷出來的時候，先顯示一個刷新的圖標(biāo)，可有可無：

chinaEchart.showLoading();

然后是獲取地圖的json數(shù)據(jù)，這是一種geoJson數(shù)據(jù)格式，自己去寫json數(shù)據(jù)還是不要想了，可以說里面都是有一個個數(shù)據(jù)組成的點(diǎn)線面，隨筆一個小圖形都上千行數(shù)據(jù)，自己做圖的話都是用工具畫出來的，文末會說。

1 $.get(mapUrl+'china.json',function(geoJson) {2 chinaEchart.hideLoading();3 echarts.registerMap('china', geoJson);4 var chinaOption ={5 visualMap: {6 min: 0,7 max: 150,8 text: ['High', 'Low'],9 realtime: false,10 calculable: true,11 inRange: {12 color: ['lightskyblue', 'yellow', 'orangered']13 },14 textStyle:{15 color:'lightskyblue'

16 }17 },18 series: [{19 type: 'map',20 mapType: 'china',21 data: [22 //value2代表唯一標(biāo)識

23 {name: '河北', value: 50, value2: 1},24 {name: '北京', value: 100, value2: 2},25 {name: '天津', value: 80, value2: 3},26 {name: '山西', value: 20, value2: 4},27 {name: '內(nèi)蒙古', value: 40, value2: 5},28 {name: '遼寧', value: 10, value2: 6},29 {name: '吉林', value: 50, value2: 7},30 {name: '黑龍江', value: 100, value2: 8},31 {name: '上海', value: 80, value2: 9},32 {name: '江蘇', value: 20, value2: 10},33 {name: '浙江', value: 40, value2: 11},34 {name: '安徽', value: 10, value2: 12},35 {name: '福建', value: 50, value2: 13},36 {name: '江西', value: 100, value2: 14},37 {name: '山東', value: 80, value2: 15},38 {name: '河南', value: 20, value2: 16},39 {name: '湖北', value: 40, value2: 17},40 {name: '湖南', value: 10, value2: 18},41 {name: '廣東', value: 50, value2: 19},42 {name: '廣西', value: 100, value2: 20},43 {name: '海南', value: 80, value2: 21},44 {name: '四川', value: 20, value2: 22},45 {name: '貴州', value: 40, value2: 23},46 {name: '云南', value: 0, value2: 24},47 {name: '重慶', value: 0, value2: 25},48 {name: '西藏', value: 0, value2: 26},49 {name: '陜西', value: 0, value2: 27},50 {name: '甘肅', value: 0, value2: 28},51 {name: '青海', value: 0, value2: 29},52 {name: '寧夏', value: 0, value2: 30},53 {name: '新疆', value: 0, value2: 31},54 {name: '香港', value: 0, value2: 32},55 {name: '澳門', value: 0, value2: 33},56 {name: '臺灣', value: 0, value2: 34}57 ],58 label: {59 normal: {60 show: true, //顯示省份標(biāo)簽

61 textStyle: {62 color: "#eee"

63 } //省份標(biāo)簽字體顏色

64 },65 emphasis: { //對應(yīng)的鼠標(biāo)懸浮效果

66 show: true,67 textStyle: {68 color: "#515"

69 }70 }71 },72 aspectScale: 0.75,//這個參數(shù)用于 scale 地圖的長寬比。最終的 aspect 的計算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale

73 zoom: 1,//當(dāng)前視角的縮放比例。

74 itemStyle: {75 normal: {76 borderWidth: .5, //區(qū)域邊框?qū)挾?/p>

77 borderColor: '#009fe8', //區(qū)域邊框顏色

78 areaColor: "#18d5d1", //區(qū)域顏色

79 },80 emphasis: {//鼠標(biāo)滑過地圖高亮的相關(guān)設(shè)置

81 borderWidth: .5,82 borderColor: '#4b0082',83 areaColor: "#CDB30A",84 } }85 ,86 top:0,87 left:'center',88 bottom:0

89 }] }90 ;91 chinaEchart.setOption(chinaOption);})

本來不想貼這么多代碼的，看著心煩，不過很多人第一次做地圖，估計也不一定有個跑的通的demo，就把自己做的一個地圖放上吧，最起碼寫的注釋多一些。

需要注意的是里面第三行代碼，巨坑：

echarts.registerMap('china', geoJson);

看清楚是registerMap，我也忘了是ide提示的還是看的別人的demo，不是這個方法，而是一個長得很像很像的另一個api，好像是版本問題？

稍微解釋一下上面的代碼：

第一行：通過ajax獲取服務(wù)器端geojson數(shù)據(jù)，當(dāng)然我這個是放前端模擬的一個json文件。

第二行：數(shù)據(jù)都獲取成功了，關(guān)閉以前那個刷新動畫。

第三行：把這個數(shù)據(jù)告訴是誰要用，這里的china要和后面series里mapType的值對應(yīng)？有段時間了，忘了。

后面的代碼就是常規(guī)配置，最后聯(lián)系echarts對象和參數(shù)了，和普通圖表一樣。

各省份地圖數(shù)據(jù)：

網(wǎng)上各種找各省份的地圖數(shù)據(jù)，看的揪心。給大家一個找到各省份json數(shù)據(jù)的方式吧。

用git下載echarts在github上的demo，方法：

2.點(diǎn)擊紅框1，彈出下載的地址，然后點(diǎn)擊紅框2，復(fù)制地址。

3.下載demo，如果沒有g(shù)it要先下載git，git到處都有，甚至360軟件管家都有。下載后在要放echarts的demo的文件夾空白處右鍵，選擇Git Bash Here，打開命令行界面后等待出現(xiàn)如圖所示：

Administrator@Lize-PC MINGW64 /d/mango/testgit/incubator-echarts(master)$

然后敲命令：git clone https://github.com/apache/incubator-echarts.git

注意復(fù)制黏貼地址只能用鼠標(biāo)右鍵操作，快捷鍵在命令行有其他作用。

4.下載完畢后，在下載的文件中按照路徑incubator-echarts\map\json\province找到各省份json數(shù)據(jù)，替換上面的china.json就能直接使用。好像還有js調(diào)用api的方式實(shí)現(xiàn)各省份的地圖，js文件也在同目錄下，這個不太清楚，因為項目還需要自己畫地圖，所以這種方式?jīng)]嘗試。

附：

1.可以根據(jù)一個圖片里某個城鎮(zhèn)或者物體的形狀自己畫地圖：

這是個神奇的網(wǎng)站，可以自己畫地圖，右側(cè)得到的就是直接能被echarts使用的json數(shù)據(jù)。

2.城鎮(zhèn)地圖獲取：

這個好像只能獲取到縣級，至于更小的級別，用上面io網(wǎng)站比著地圖自己畫吧。

總結(jié)

以上是生活随笔為你收集整理的echarts地图api series_echarts学习（4）——地图实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。