echarts实现中国地图下钻进入下一级(地图钻取)
作者：美酒没故事°
最近在学习echarts,今天就来介绍一下echarts实现中国地图下钻进入下一级,具有一定的参考价值,感兴趣的可以了解一下
echarts是一个基于JavaScript的可视化开源组件库。通过使用echarts,用户可以方便地将数据制图展示，本文就来介绍一下echarts实现中国地图下钻进入下一级(地图钻取)，具体如下：
获取geo数据：
可以使用node爬虫获取数据
最好多爬几遍，因为有时候会获取错误
echarts实现 html
<div ref="echarts-dom" class="echarts-content"></div>
js:
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);
});
},
}
}到此这篇关于echarts实现中国地图下钻进入下一级(地图钻取)的文章就介绍到这了,更多相关echarts 地图下钻内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！