因項目需求,使用echarts控制項完成山東省地圖下鑽功能,現在把方法貼一下;
//隨機產生各省市的資料 function randomData() { return Math.round(Math.random()*50);}//地圖下鑽 使用switch 轉換地圖json檔案var mapChange=function(city){ var maps='shanDong'; switch(city){ case '濟南市': maps='jinan';break; case '德州市': maps='dezhou';break; case '泰安市': maps='taian';break; case '煙台市': maps='yantai';break; case '淄博市': maps='zibo';break; case '萊蕪市': maps='laiwu';break; case '日照市': maps='rizhao';break; case '濟寧市': maps='jining';break; case '菏澤市': maps='heze';break; case '威海市': maps='weihai';break; case '棗莊市': maps='zaozhuang';break; case '臨沂市': maps='linyi';break; case '濱州市': maps='binzhou';break; case '東營市': maps='dongying';break; case '濰坊市': maps='weifang';break; case '聊城市': maps='liaocheng';break; case '青島市': maps='qingdao';break; } return maps;};//各市區下級縣區方法var cityMapsShow=function(city){ var chart = echarts.init(document.getElementById('cityMaps')); chart.showLoading(); $.get('js/echarts/map/'+city+'.json', function (chinaJson) { echarts.registerMap('cityMap', chinaJson); chart.hideLoading(); chart.setOption({ title : { text: '山東地圖', subtext: '充電樁調度', left: 'left', textStyle:{ color:'#fff', fontStyle:'normal', fontWeight:'normal', fontFamily:'宋體', fontSize:22 }, subtextStyle:{ color:'white', fontStyle:'normal', fontWeight:'normal', fontFamily:'宋體', fontSize:16 } }, visualMap: { min: 0, max: 200, left: '3%', top: 'bottom', text:['高','低'], // 文本,預設為數值文本 calculable : true, textStyle:{ color:'white' } }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', left: 'right', top:'bottom', data:['充電中','待機中','異常狀態'], textStyle:{ color:'#fff' } }, silent:false, series: [ { name:'充電中', type: 'map', map: 'cityMap', roam:true, scaleLimit:{ min:1.2, max:4 }, showLengendSymbol:true, label: { normal: { show: true, textStyle:{ color:'blue', } }, emphasis: { show: true, textStyle:{ } } }, }, ] }); chart.on("dblclick",function(params){ var city=params.name; mapChange(city); document.getElementById('province').style.display='none'; document.getElementById('cityMaps').style.display='block'; }); }); };//返回山東省全省地圖var provinceMaps=function(){ var chart = echarts.init(document.getElementById('province')); chart.showLoading(); $.get('js/echarts/map/shanDong.json', function (chinaJson) { echarts.registerMap('shanDong', chinaJson); chart.hideLoading(); chart.setOption({ title : { text: '山東地圖', subtext: '充電樁調度', left: 'left', textStyle:{ color:'#fff', fontStyle:'normal', fontWeight:'normal', fontFamily:'宋體', fontSize:22 }, subtextStyle:{ color:'white', fontStyle:'normal', fontWeight:'normal', fontFamily:'宋體', fontSize:16 } }, visualMap: { min: 0, max: 200, left: '3%', top: 'bottom', text:['高','低'], // 文本,預設為數值文本 calculable : true, textStyle:{ color:'white' } }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', left: 'right', top:'bottom', data:['充電中','待機中','異常狀態'], textStyle:{ color:'#fff' } }, silent:false, series: [ { name:'充電中', type: 'map', map: 'shanDong', roam:true, scaleLimit:{ min:1, max:4 }, showLengendSymbol:true, label: { normal: { show: true, textStyle:{ color:'blue', } }, emphasis: { show: true, textStyle:{ } } }, data:[ {name:'濟南市',value:randomData()}, {name:'德州市',value:randomData()}, {name:'青島市',value:randomData()}, ], }, { name:'待機中', type: 'map', map: 'shanDong', roam:true, scaleLimit:{ min:1, max:4 }, showLengendSymbol:true, label: { normal: { show: true, textStyle:{ color:'blue', } }, emphasis: { show: true, textStyle:{ } } }, data:[ {name:'濟南市',value:randomData()}, {name:'德州市',value:randomData()}, {name:'青島市',value:randomData()}, ], }, { name:'異常狀態', type: 'map', map: 'shanDong', roam:true, scaleLimit:{ min:1, max:4 }, showLengendSymbol:true, label: { normal: { show: true, textStyle:{ color:'blue', } }, emphasis: { show: true, textStyle:{ } } }, data:[ {name:'濟南市',value:randomData()}, {name:'德州市',value:randomData()}, {name:'青島市',value:randomData()}, ], }, ] }); chart.on("click",function(params){ var city=params.name; var city1=mapChange(city); document.getElementById('province').style.display='none'; document.getElementById('cityMaps').style.display='block'; cityMapsShow(city1); }); }); };