echarts 地圖下鑽方式

要求點中國地圖某個省然後地圖切換成對應單獨省份的市級地圖,然後再點擊市級地圖任何位置又返回到中國地圖。
有一種比較好理解的下鑽方式,就是一開始就默認已經加載好兩個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地圖。

如有說的不對的,還望指出,謝謝。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章