企业网站栏目设置说明,淘宝内部券网站建设,建设网站的安全性介绍,常州网站设计公司获取geo数据#xff1a; 可以使用node爬虫获取数据 最好多爬几遍#xff0c;因为有时候会获取错误
实现逻辑
拥有geo数据后
请求geo数据注册地图 registerMap配置echarts增加事件监听#xff08;点击事件#xff09;
如果点击了#xff0c;回到第一步。功能就是循环以…
获取geo数据 可以使用node爬虫获取数据 最好多爬几遍因为有时候会获取错误
实现逻辑
拥有geo数据后
请求geo数据注册地图 registerMap配置echarts增加事件监听点击事件
如果点击了回到第一步。功能就是循环以上4步逻辑
echarts实现
html div refecharts-dom classecharts-content/divjs:
export default {data() {return {mapChart: null,addressCode: []};},mouted(){this.mapChart echarts.init(this.$refs[echarts-dom]);this.getData();},methods: {getData(100000) {fetch(${process.env.VUE_APP_ORIGIN}/geoData/${code}.json).then((res) {return res.json();}).then((res) {this.addressCode res.features;echarts.registerMap(echartsMap, res);this.setEchartsOptions();}).finally((err) {this.mapLoading false;});},// echarts配置setEchartsOptions() {this.mapChart.off(click); //图表渲染前销毁点击事件this.mapChart.setOption({series: [{type: map,mapType: echartsMap,roam: true,scaleLimit: {min: 1.1,max: 5.2,},data: this.addressCode,// 地图模块样式itemStyle: {// 默认模块样式normal: {borderWidth: 1.3,borderColor: #00ffff,areaColor: #09295b,},// 鼠标经过模块样式emphasis: {show: true,borderWidth: 3,areaColor: #0d559d,label: {show: true,textStyle: {color: #fff,},},},},label: {show: true,textStyle: {color: #fff,},},},],},true);this.addEchartsEventListener();},// 监听echarts事件addEchartsEventListener() {const that this;// 点击时间this.mapChart.on(click, function (params) {console.log(params.data);that.getData(params.data.codeNumber);});// 移动 | 缩放this.mapChart.on(georoam, (params) {that.$emit(swicthPanle, false);});},}
}
