要求點中國地圖某個省然後地圖切換成對應單獨省份的市級地圖,然後再點擊市級地圖任何位置又返回到中國地圖。
有一種比較好理解的下鑽方式,就是一開始就默認已經加載好兩個div以及對應的echarts相關數據了,只要做兩個地圖的click事件,把中國地圖跟市級地圖做顯示隱藏相互切換就好。這種一般只做單個省份的會快些。最好用
<div id="eversecAreaChart" style="width:80%; height:100%" :style="{'opacity':opacity,'z-index':zIndex,'display':zDisplay}"></div>
this.zDisplay = this.zDisplay == 'none'? '' : 'none';
display來顯示隱藏。
在做切換這個的div時需要使用setTimeout延遲10毫秒來重新繪製地圖,不然地圖默認會被縮成一團。
toggle(){
this.opacity = this.opacity == 0 ? 1 : 0;
this.zIndex = this.zIndex ==0 ? 1 : 0;
this.zDisplay = this.zDisplay == 'none'? '' : 'none';
if(this.zDisplay!='none'){
var that = this;
setTimeout(()=>{
that.instance.resize();
},10);
}
},
地圖點擊事件中會接收一個參數,參數中的name就是對應省份的名字,所以可以根據name來判斷是否是自己想下鑽的那個省份的名字就好。
this.chinaInstance.setOption(option);
this.chinaInstance.on("click",(param)=>{
var names = param.name;
if(names == "遼寧"){
this.toggle();
}
});
還有一種下鑽的方式思路是共用同一個div,然後在點擊切換省份時判斷是該省份名字時去echarts.register註冊需要顯示的地圖,然後echarts.init去獲取這div重新繪製過地圖,來回切換重新獲取div的id去重繪並resize地圖。
如有說的不對的,還望指出,謝謝。。。