先來看效果，太原市的地圖，顯示市下面的區，區下面的商戶，默認顯示3個商戶信息，其余商戶信息鼠標移動上去顯示商戶信息：

我是怎么做的呢？因為網上找的地圖都不符合需求，所以從設計開始就按非常規方法：大致就是先代碼模擬出市的輪廓->截圖保存，ps處理，每個區保存為一個圖層->需要的區加上顏色和區名->頁面中使用整張地圖作為背景圖->其他文字信息一律代碼寫上去。

第一步：

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

• 然后將json文件打開，復制代碼，百度json在線格式化工具，方便我們復制粘貼區名，網址：http://www.bejson.com/。也可以更簡單一點，不格式化直接百度找全國市區json，如https://www.jianshu.com/p/a9c9eeb17212。

• 然后去官網示例中找到地圖的示例，下載html頁面，復制其中的主要內容，新建如下代碼的html頁面，然后啟動服務器就能生成一張帶有區名的太原市區地圖。

<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();//從官網下的echarts包里面有包含市的json文件，引入進來即顯示省份下面的市。我們這里是從網上找的太原市區的json文件，引入進來$.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', // 自定義擴展圖表類型itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}},},label:{normal:{textStyle:{color:'#fff'}}},data:[{name: '小店區', value: 20057.34},{name: '尖草坪區', value: 15477.48},{name: '晉源區', value: 31686.1},{name: '迎澤區', value: 6992.6},{name: '萬柏林區', value: 44045.49},{name: '杏花嶺區', value: 40689.64},{name: '清徐縣', value: 37659.78},{name: '古交市', value: 45180.97},{name: '婁煩縣', value: 55204.26},{name: '陽曲縣', value: 21900.9},],// 自定義名稱映射，我們只要一個地圖輪廓可以不管它nameMap: {'Central and Western': '中西區','Eastern': '東區','Islands': '離島','Kowloon City': '九龍城','Kwai Tsing': '葵青','Kwun Tong': '觀塘','North': '北區','Sai Kung': '西貢','Sha Tin': '沙田','Sham Shui Po': '深水埗',}}]});});;if (option8 && typeof option8 === "object") {myChart8.setOption(option8, true);} </script>

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

第二步：

?ps處理這張圖，將每個區域區分開來，處理成我們想要的樣子，作為一張背景圖放入頁面中：

第三步：

就是常規的寫靜態頁面的方法了。在頁面上加上運營商的各種信息和圖標。頁面完成。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。