我这里采用的是echars地图实现,技术栈是vue 准备工作 需要引用几个文件echars.js、china.js、world.js、geoAtlasJson.js <!-- 中国地图 --><!-- 世界地图 --> 一级页面部分 HTML部分 创建两个容器,分别放置中国地图和世界地图 data数据部分 data:function(){return{chinaMap:"",//中国地图worldMap...
在Vue项目中实现ECharts地图的下钻功能,可以按照以下步骤进行。下钻功能通常指的是在用户点击地图上的某个区域时,能够展示该区域更详细的地图。以下是详细的步骤和代码示例: 1. 在Vue项目中集成ECharts库 首先,你需要在Vue项目中集成ECharts库。你可以通过npm或yarn安装ECharts: bash npm install echarts --save...
你可以从ECharts 官网下载所需的 GeoJSON 数据。 或者使用第三方 API 来动态获取这些数据。通过第三方获取JSON数据网站:hxkj.vip/demo/echart… 选择对应的省市区获取到对应的JSON数据 3.实现地图下钻 在Vue 3中创建一个 ECharts 组件并实现点击事件处理来进行地图下钻。 并将下载好的JSON文件放入assets文件中 ...
关于国到省的下钻这里就不在重复一遍了,想了解的可以看这里👉[vue + echarts实现中国地图省份下钻联动]。 地图资源 首先画出地图的第一步也是最重要一步就是要有对应的地图资源,这里我将所有的地图资源都放在了项目里,具体位置如下: 城市地图数据是这样子的👇 具体代码与城市名的映射关系表可以看这里👇 省...
逻辑原理: 初始化中国地图,利用地图点击事件设置map配置到省或者市 难点:源码没有市级别的json,增加了下钻第三级的难度 解决方式:下载json资源,引入并重新注册地图 版本:4.2.0-rc.2 备注:尚未了解新版本是否含市级别的json文件 l前戏了解: 源码地图了解 ===>路径:echarts->map-> js/json 文件夹 ...
chengDu.json文件是成都下各个区的,不需要可以删除这个逻辑,json文件不提供 点击地图右键可返回上级 image.png <template> <!-- 0" @click="setchina()"> {{ table[0].name }} 1" @click="setprovice()"> > {{ table[1].name }} 2" style="cursor:default"> > {{ table[2].name...
三、引入 echarts 因为echarts 在 5.0 及之后版本因 包体积优化和法规规定 取消了内置 json 地图数据,但仍然可以下载之前版本的依赖包来使用或下载曾经内置的地图数据。 若要引地图 json 数据,建议下载 echarts@4.9.0 ,这是 echarts 取消内置前的最新版本地图 json 数据,之前的版本地图数据比如 ...
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能(基本版 未做过多功能拓展和样式优化 便于二次开发)。由于祖国地大物博、地市众多,仅完成了省级行政区及部分地市的钻取,暂无地图数据的区域 大家可以自行移步 datav 地图选择器 下载相应的地图 json 数据,参照已有地市的配置实现即可。
中国地图下显示为热力图，显示精确分布点只是demo所以数据是自己写的假数据只有几条 点击进入省份地图，在地图之外还有那个小箭头是数据的原因不是bug改下数据就好 先上官网 http://echarts.baidu.com/option.html#title ，表白echarts，文档真的很详细，良心官网 下钻到市级县级道理也是如此 欢迎留言交流...
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo