echarts 監聽地圖縮放和移動事件

Vue中監聽echarts實現的中國地圖縮放事件,方法如下:

    //初始化中國地圖
    initEchartMap() {
	      let mapDiv = document.getElementById("material_map_box");
	      let myChart = echarts.init(mapDiv);
	      myChart.setOption(this.options);
	      this.myChart = myChart;
	      this.listenerZoom();
    },
   
    //監聽縮放事件
   listenerZoom() {      
      this.myChart.on("georoam", params => {
        if (params.dy || params.dx) return; //如果是拖拽事件則退出
        let _option = this.myChart.getOption();     //獲取最新的option配製
        let _zoom = _option.geo[0].zoom;           //獲取當前縮放比例zoom

        這裏可以根據自己情況修改_option選項配製。。。。。。
     
        this.myChart.clear();                            //清空
        this.myChart.setOption(_option);        //更新修改後的option配製
      });
    },

注意事項

1,監聽的 georoam方法的前提:echarts實現的中國地圖,option地理座標組件的配製是geo

 geo: {  }

Vue中監聽echarts+百度地圖實現的地圖,其縮放事件,方法如下:
option配製

{
    title: {
        text: "應急資源統計分散圖",
        left: "center",
        textStyle: {
          color: "#fff"
        }
  },
  tooltip: {
        triggerOn: "click",
        show:false
   },
  bmap: {                    //百度地圖配製
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
          styleJson: CUSTOM_MAP_CONFIG   //百度地圖樣式配製
        }
 },
  series: [}
}

整體與geo實現中國地圖一致,不過,方法改爲bmaproam

 //初始化中國地圖
  initEchartMap() {
     let mapDiv = document.getElementById("material_map_box");
     let myChart = echarts.init(mapDiv);
     myChart.setOption(this.options);
     this.myChart = myChart;
     this.listenerZoom();
   },
    //監聽縮放事件
    listenerZoom() {
      this.myChart.on("bmaproam", params => {     //這裏是bmaproam方法,其餘都一樣
        let _option = this.myChart.getOption();
        let _zoom = _option.bmap[0].zoom;
  
        這裏可以根據自己情況修改_option選項配製。。。。。。
       
        this.myChart.clear();
        this.myChart.setOption(_option);
      });
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章