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 地图下钻内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解JavaScript中Proxy与Object.defineProperty的区别
Proxy和Object.defineProperty都是JavaScript中用于实现对象属性拦截和代理的机制,但它们在功能和应用方面有一些区别,本文通过代码示例详细介绍了二者的区别,感兴趣的朋友可以参考下2023-06-06JS 解决Cannot set properties of undefined的问题
遇到这样问题当前的是当前对象或者数组是undefined,但是却用来引用属性或者索引,遇到这样的问题如何解决呢,下面通过本文给大家介绍JS 如何解决Cannot set properties of undefined,需要的朋友可以参考下2024-01-01深入理解JavaScript中async/await的错误处理方式
在现代JavaScript开发中,异步编程是不可或缺的一部分,async和await是一种强大的异步编程工具,它们使得编写和维护异步代码更加容易和清晰,然而,异步操作仍然可能会出现错误,本文将深入探讨async和await的错误处理方式,提供详细的代码示例和解释2023-09-09
最新评论