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);
});
},