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);
      });
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章