先來(lái)看效果，太原市的地圖，顯示市下面的區(qū)，區(qū)下面的商戶(hù)，默認(rèn)顯示3個(gè)商戶(hù)信息，其余商戶(hù)信息鼠標(biāo)移動(dòng)上去顯示商戶(hù)信息：

我是怎么做的呢？因?yàn)榫W(wǎng)上找的地圖都不符合需求，所以從設(shè)計(jì)開(kāi)始就按非常規(guī)方法：大致就是先代碼模擬出市的輪廓->截圖保存，ps處理，每個(gè)區(qū)保存為一個(gè)圖層->需要的區(qū)加上顏色和區(qū)名->頁(yè)面中使用整張地圖作為背景圖->其他文字信息一律代碼寫(xiě)上去。

第一步：

• 由于echarts官網(wǎng)下載的包里只包含省份下面的市json文件，我們要的是市下面的區(qū)json文件，所以要先從網(wǎng)上找到對(duì)應(yīng)的區(qū)json文件，放入map包里或者其他地方。

• 然后將json文件打開(kāi)，復(fù)制代碼，百度json在線(xiàn)格式化工具，方便我們復(fù)制粘貼區(qū)名，網(wǎng)址：http://www.bejson.com/。也可以更簡(jiǎn)單一點(diǎn)，不格式化直接百度找全國(guó)市區(qū)json，如https://www.jianshu.com/p/a9c9eeb17212。

• 然后去官網(wǎng)示例中找到地圖的示例，下載html頁(yè)面，復(fù)制其中的主要內(nèi)容，新建如下代碼的html頁(yè)面，然后啟動(dòng)服務(wù)器就能生成一張帶有區(qū)名的太原市區(qū)地圖。

<div id="taiyuanMap" style="width: 100%;height:240px;"></div><script src="js/jquery.min.js"></script> <script src="echarts/dist/echarts.min.js"></script><script type="text/javascript">var dom8 = document.getElementById("taiyuanMap");var myChart8 = echarts.init(dom8);var app8 = {};option8 = null;myChart8.showLoading();//從官網(wǎng)下的echarts包里面有包含市的json文件，引入進(jìn)來(lái)即顯示省份下面的市。我們這里是從網(wǎng)上找的太原市區(qū)的json文件，引入進(jìn)來(lái)$.get('echarts/map/json/taiyuan.json', function (geoJson) {myChart8.hideLoading();echarts.registerMap('taiyuan', geoJson);myChart8.setOption(option8 = {tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},visualMap: {show: false,min: 800,max: 50000,text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['#0048ff','#0078ff', '#0090ff']},},series: [{name: '太原',type: 'map',mapType: 'taiyuan', // 自定義擴(kuò)展圖表類(lèi)型itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}},},label:{normal:{textStyle:{color:'#fff'}}},data:[{name: '小店區(qū)', value: 20057.34},{name: '尖草坪區(qū)', value: 15477.48},{name: '晉源區(qū)', value: 31686.1},{name: '迎澤區(qū)', value: 6992.6},{name: '萬(wàn)柏林區(qū)', value: 44045.49},{name: '杏花嶺區(qū)', value: 40689.64},{name: '清徐縣', value: 37659.78},{name: '古交市', value: 45180.97},{name: '婁煩縣', value: 55204.26},{name: '陽(yáng)曲縣', value: 21900.9},],// 自定義名稱(chēng)映射，我們只要一個(gè)地圖輪廓可以不管它nameMap: {'Central and Western': '中西區(qū)','Eastern': '東區(qū)','Islands': '離島','Kowloon City': '九龍城','Kwai Tsing': '葵青','Kwun Tong': '觀塘','North': '北區(qū)','Sai Kung': '西貢','Sha Tin': '沙田','Sham Shui Po': '深水埗',}}]});});;if (option8 && typeof option8 === "object") {myChart8.setOption(option8, true);} </script>

?上面的代碼生成的一張地圖：

第二步：

?ps處理這張圖，將每個(gè)區(qū)域區(qū)分開(kāi)來(lái)，處理成我們想要的樣子，作為一張背景圖放入頁(yè)面中：

第三步：

就是常規(guī)的寫(xiě)靜態(tài)頁(yè)面的方法了。在頁(yè)面上加上運(yùn)營(yíng)商的各種信息和圖標(biāo)。頁(yè)面完成。

總結(jié)

以上是生活随笔為你收集整理的echarts自定义省份地图及map上的内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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