echarts 监听地图缩放和移动事件
Vue中监听echarts实现的中国地图缩放事件,方法如下://初始化中国地图initEchartMap() {let mapDiv = document.getElementById("material_map_box");let myChart = echarts.init(mapDiv);myChart.setOption(this.options);this.myChart = myCha
·
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);
});
},
更多推荐
已为社区贡献17条内容
所有评论(0)