我做的是吉林省下鉆到市區(qū)

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

?這里的jilins? 是吉林省的json? 因?yàn)楹图质兄孛? 所以加了個(gè)s

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

下邊是代碼

首先有個(gè)div

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

<script>$(function () {//ajax，查詢(xún)數(shù)據(jù)CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {var data = resouse.data.param;var geoCoordMap = {'長(zhǎng)春市': [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名稱(chēng)查看下載的地圖js內(nèi) 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'));//存儲(chǔ)切換的每一級(jí)地圖信息var mapStack = [];var timeFn = null;var curMap = {};//初始化為中國(guó)地圖loadMap('jilins', '吉林', data);/**綁定用戶(hù)切換地圖區(qū)域事件cityMap對(duì)象存儲(chǔ)著地圖區(qū)域名稱(chēng)和區(qū)域的信息(name-code)當(dāng)mapCode有值,說(shuō)明可以切換到下級(jí)地圖同時(shí)保存上級(jí)地圖的編號(hào)和名稱(chēng)*/myChart.on('mapselectchanged', function (params) {clearTimeout(timeFn);//由于單擊事件和雙擊事件沖突，故單擊的響應(yīng)事件延遲250毫秒執(zhí)行timeFn = setTimeout(function () {var name = params.batch[0].name;var mapCode = '';if (name == '長(zhǎng)春市') {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;}//單機(jī)事件這里應(yīng)該查詢(xún)下邊的數(shù)據(jù)然后傳入。CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {});loadMap(mapCode, name, data);//將上一級(jí)地圖信息壓入mapStackmapStack.push({mapCode: curMap.mapCode,mapName: curMap.mapName});}, 250);});/**綁定雙擊事件，并加載上一級(jí)地圖*/myChart.on('dblclick', function (params) {//當(dāng)雙擊事件發(fā)生時(shí)，清除單擊事件，僅響應(yīng)雙擊事件clearTimeout(timeFn);var map = mapStack.pop();if (!mapStack.length && !map) {layer.msg('已經(jīng)到達(dá)最上一級(jí)地圖了');return;}loadMap(map.mapCode, map.mapName, data);});/**加載地圖：根據(jù)地圖所在省市的行政編號(hào)，獲取對(duì)應(yīng)的json地圖數(shù)據(jù)，然后向echarts注冊(cè)該區(qū)域的地圖最后加載地圖信息@params {String} mapCode:地圖行政編號(hào),for example['中國(guó)':'100000', '湖南': '430000']@params {String} mapName: 地圖名稱(chēng)*/function loadMap(mapCode, mapName, datas) {$.getJSON('/json/' + mapCode + '.json', function (data) {if (data) {echarts.registerMap(mapName, data);var option = {title: {text: '吉林省小區(qū)評(píng)分情況',float: 'right'},tooltip: {trigger: 'item',formatter: function (params) { //鼠標(biāo)移過(guò)某市彈出框展示內(nèi)容// 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){//展示內(nèi)容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',// 鼠標(biāo)放到地圖板塊的顏色borderColor: '#e0854f', //鼠標(biāo)放到地圖板塊的邊界的顏色}},// 高亮區(qū)域regions: [{name: '',itemStyle: {shadowBlur: 20,areaColor: '#2379E3', //區(qū)域顏色borderColor: '#0a2dae',// 線shadowColor: '#0a2dae',// 外發(fā)光}}]},]};myChart.setOption(option);curMap = {mapCode: mapCode,mapName: mapName};} else {alert('無(wú)法加載該地圖');}});}});});</script>

效果圖

鼠標(biāo)移到上邊的彈窗顯示?

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

總結(jié)

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

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