我做的是吉林省下鉆到市區

首先你得有這些東西，資源我得資源里有，3分還是5分下載。里邊有全國的都有。

?這里的jilins? 是吉林省的json? 因為和吉林市重名? 所以加了個s

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

下邊是代碼

首先有個div

<div class="right" id="right"></div>

<script>$(function () {//ajax，查詢數據CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {var data = resouse.data.param;var geoCoordMap = {'長春市': [125.45, 43.98],'吉林市': [126.57, 43.87],'四平市': [124.58, 43.43],'白山市': [126.4415188999591, 42.05153200503509],'延邊朝鮮族自治州': [129.12, 43.13],'松原市': [124.84354633755109, 45.18368571425691],'白城市': [122.82, 45.53],'遼源市': [125.15, 42.97],'通化市': [125.92, 41.69]};//map名稱查看下載的地圖js內 echarts.registerMap('吉林' ...var convertData = function (d) {var res = [];for (var i = 0; i < d.length; i++) {var geoCoord = geoCoordMap[d[i].name];if (geoCoord) {res.push({name: d[i].name,value: geoCoord.concat(d[i].value)});}}return res;};var myChart = echarts.init(document.getElementById('right'));//存儲切換的每一級地圖信息var mapStack = [];var timeFn = null;var curMap = {};//初始化為中國地圖loadMap('jilins', '吉林', data);/**綁定用戶切換地圖區域事件cityMap對象存儲著地圖區域名稱和區域的信息(name-code)當mapCode有值,說明可以切換到下級地圖同時保存上級地圖的編號和名稱*/myChart.on('mapselectchanged', function (params) {clearTimeout(timeFn);//由于單擊事件和雙擊事件沖突，故單擊的響應事件延遲250毫秒執行timeFn = setTimeout(function () {var name = params.batch[0].name;var mapCode = '';if (name == '長春市') {mapCode = 'changchun';}if (name == '吉林市') {mapCode = 'jilin';}if (name == '四平市') {mapCode = 'siping';}if (name == '白城市') {mapCode = 'baicheng';}if (name == '松原市') {mapCode = 'songyuan';}if (name == '遼源市') {mapCode = 'liaoyuan';}if (name == '白山市') {mapCode = 'baishan';}if (name == '通化市') {mapCode = 'tonghua';}if (name == '延邊朝鮮族自治州') {mapCode = 'yanbian';}if (mapCode == '') {return;}//單機事件這里應該查詢下邊的數據然后傳入。CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {});loadMap(mapCode, name, data);//將上一級地圖信息壓入mapStackmapStack.push({mapCode: curMap.mapCode,mapName: curMap.mapName});}, 250);});/**綁定雙擊事件，并加載上一級地圖*/myChart.on('dblclick', function (params) {//當雙擊事件發生時，清除單擊事件，僅響應雙擊事件clearTimeout(timeFn);var map = mapStack.pop();if (!mapStack.length && !map) {layer.msg('已經到達最上一級地圖了');return;}loadMap(map.mapCode, map.mapName, data);});/**加載地圖：根據地圖所在省市的行政編號，獲取對應的json地圖數據，然后向echarts注冊該區域的地圖最后加載地圖信息@params {String} mapCode:地圖行政編號,for example['中國':'100000', '湖南': '430000']@params {String} mapName: 地圖名稱*/function loadMap(mapCode, mapName, datas) {$.getJSON('/json/' + mapCode + '.json', function (data) {if (data) {echarts.registerMap(mapName, data);var option = {title: {text: '吉林省小區評分情況',float: 'right'},tooltip: {trigger: 'item',formatter: function (params) { //鼠標移過某市彈出框展示內容// debugger// if (typeof (params.value)[2] == "undefined") {// return params.name + ' : <br/>' + datas[i].par;// } else {// return params.name + ' : <br/>' + params.value[2];// }var name = params.name;for (var i = 0; i < datas.length; i++) {if (name == datas[i].name) {return params.name + ' : <br/>' + datas[i].par;}}},data: convertData(datas)},series: [{name: '',type: 'map',mapType: mapName,selectedMode: 'multiple',label: {normal: {show: true,//字體樣式textStyle: {fontSize: 15,color: '#cccccc'},formatter: function (params) {console.log(params)if(params.data){//展示內容return params.name+"\n"+ params.data.value[2];}},},emphasis: {show: true},},data: convertData(datas),itemStyle: {normal: {areaColor: '#174b9c',borderColor: '#e0854f',//板塊邊界色borderWidth: 2 //板塊邊顏色寬度},emphasis: {areaColor: '#f1c237',// 鼠標放到地圖板塊的顏色borderColor: '#e0854f', //鼠標放到地圖板塊的邊界的顏色}},// 高亮區域regions: [{name: '',itemStyle: {shadowBlur: 20,areaColor: '#2379E3', //區域顏色borderColor: '#0a2dae',// 線shadowColor: '#0a2dae',// 外發光}}]},]};myChart.setOption(option);curMap = {mapCode: mapCode,mapName: mapName};} else {alert('無法加載該地圖');}});}});});</script>

效果圖

鼠標移到上邊的彈窗顯示?

單擊白城市，下鉆到白城市的地圖

總結

以上是生活随笔為你收集整理的echarts地图单机下钻双击返回的全部內容，希望文章能夠幫你解決所遇到的問題。

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