Echarts 自己按需制作不同省份/城市合并展示js

最新推荐文章于 2024-07-25 17:52:07 发布
最新推荐文章于 2024-07-25 17:52:07 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 填坑记录 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryiwu/article/details/106784418
版权
本文记录如何利用Echarts自带的北京、天津、河北地图数据，通过组合坐标，创建自定义的京津冀地图。做法简单，适用于需要展示特定区域地图的场景。
摘要由CSDN通过智能技术生成

需求背景

公司与我对接的前端同事需要展示一份京津冀地图数据的信息，但是这个少年Echarts找不到只有专门的京津冀的地图，Echarts只有各省份和直辖市的各张地图，这个少年比较轴，非要找现有的代码，于是给他提供下老码农的思路做法，想来值得一记，顺便写下来给后来者提供下思路。

做法思路

Echarts自带有北京/天津/河北(冀)地图，而且源码其实相当简单，就是名称，加坐标。
北京地图echart源码
那要做一张京津冀地图，就很容易了，那就是把坐标拿出来，放一块，自建一个js叫京津冀。
完事了。
在这里插入图片描述
同样的思路，你想做啥自定义地图都行。

效果图

最后放一张效果图
在这里插入图片描述
嫌密密麻麻的文字不好看，记得去掉就行
在这里插入图片描述
在这里插入图片描述

下载链接

ryiwu
关注
专栏目录
echarts地图合并(省和省合并，市和市合并，省和市合并)
tempuser78的博客
10-17 3008
echarts地图合并(省和省合并，市和市合并，省和市合并) //获取要合并地图的数据 $scope.getMergeMapData = function () { // var areaArr = [{pro:'湖北',city:[]}] // var areaArr = [{pro:'广东',city:['潮州市','揭阳市','汕头市','汕尾市']}] ...
Echarts3之全国地图和省市地图二合一整合
ZT的专栏
09-20 9653
没图说个ji  先上图 开始接触时是echarts 2 ，echarts升级至echarts 3 之后没怎么接触，通过介绍了解到，echarts3变得更加人性化，将一些底层的方法开放出来，增加的echarts的扩展性。 很遗憾echarts3并没有提供市级的地图的demo。 于是将echarts2中的demo直接拿来改 下面是代码：希望能帮助到你 ECharts
vue2.0+echarts实现多省份地图加双柱状图展示（保姆级教程）
最新发布
simpleMan8023的博客
07-25 485
首先放效果图 开始之前我默认您已成功下载和导入相关插件打开 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6 鼠标点击你想要的省份 然后在右边根据需要看是否勾选（包含子区域），如果勾选了就会有市地区级的坐标，我这个项目是不需要的，所以不勾选，然后根据需要点击第三行------其他类型 点击下载保存 你会得到该省份的 文件 ，然后依次下载需
ECharts合并地图上的区域
ddyy2695734664的博客
02-18 2638
对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。 于是就需要对官方提供的地图数据进行修改。 一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。 实际上，直接将这三个省的轮廓点合并即可...
Echarts合并多省市地图JSON文件方法
qq_43399427的博客
10-29 4007
*Echarts获取多省市地图JSON文件方法 最近在学习用echarts插件进行地图显示，当我想要获取两个或者以上省的一块大地图的时候，发现好像没有可以直接生成的，最后摸索出来了一个比较实用的方法，仅供参考。(以苏皖两省为例) step1:单独下载两省地图JSON文件 这里发现了一个大神做的网站，打开链接： https://hxkj.vip/demo/echartsMap/ 如图 通过左上角的选项可以选择你想要的区域，省市均可，点击下载geoJson数据按钮就下载好了。 下载完了之后，发现是geoJs
echarts各省份地图合并成一个JS文件
03-02
echarts各省份地图合并成一个JS文件，只需引入一个就可以用所有省份的地图，文件还兼容了echarts4.0
echarts地图json数据，全国个省份主要城市经纬度数据文件
06-21
ECharts 是一个基于 JavaScript 的开源可视化库，广泛用于制作各种数据图表。在 ECharts 中，地图图表（maps）...在实际应用中，可以根据需求加载不同的省份地图数据文件，或者通过合并多个文件来展示多个省份的地图。
echarts全国省市合并js和json
12-21
在"echarts全国省市合并js和json"这个主题中，主要涉及到的是如何使用ECharts来绘制中国地图，并展示各个省份和城市的数据。 首先，我们要理解ECharts地图图表的工作原理。ECharts中的地图数据通常是以JSON格式存储...
echarts 全国以及各省市的地图数据js与json合并版下载
01-04
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够轻松实现各种复杂的可视化需求。在本压缩包文件中，包含的是ECharts3中关于全国及各...
echarts 地图 区域合并
m0_52775179的博客
03-02 1056
echarts 地图 区域合并
Echarts 切分合并修改地图区域教程手册+工具
12-17
新规划了区县后原Echarts地图不支持新的区域，可以参照此文档修改地图区域信息增加或合并区域
陕西省echarts地图资源文件js
08-13
压缩包为陕西省echarts地图省市地图下钻js文件，echarts官方已不提供下载，有需要的可以下载看看
2022年echarts陕西省最新10市json地图
05-22
2022年自己调整过使用过的echarts陕西省最新10市json地图，包括西安市、宝鸡市、咸阳市、铜川市、渭南市、延安市、榆林市、汉中市、安康市、商洛市。echarts直接调用json文件。
陕西省和西安市echarts地图
05-28
陕西省和西安市echarts地图，省可查地级市，市可查区县
echarts 厦门市地图矢量数据js
06-28
echarts 厦门市地图矢量数据js
2024年阿里首次分享：内部（珠峰版)Java笔记，看完直接斩获12家offer
m0_72758098的博客
05-03 511
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Js拼接Json供echarts的地图使用
不要怕
02-28 810
需求:使用Echarts的地图显示数据时，后端传过来的数据格式，与期望的不同，需要重新拼接Json。 需要这样样子的数据格式 maps_data = { "max": 2936, "data": [{ "value": 695, "name": "陕西" }, { "valu.
vue echarts 获取省份地图
08-15
在Vue中使用echarts获取省份地图，你可以按照以下步骤进行操作。 首先，你需要引入需要的echarts包和对应的省份地图。你可以使用import语句引入echarts包，并在Vue的组件中使用import语句引入对应的省份地图。例如，你可以使用以下代码引入echarts和湖北省的地图： ```javascript import echarts from "echarts/lib/echarts" import "echarts/map/js/province/hubei.js"; ``` 接下来，你需要在main.js文件中引入echarts并将其挂载到Vue的原型上。你可以使用以下代码实现： ```javascript import * as echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 这样，你就可以在Vue组件中通过`this.$echarts`来使用echarts。 然后，你可以在Vue组件中使用echarts来实现获取省份地图的功能。你可以在该组件的方法中使用echarts的相关API来绘制地图和处理交互。具体的实现方式可以参考echarts官方文档的示例和地图相关的API。你可以在echarts官网的示例页面（https://echarts.apache.org/examples/zh/index.html）和地图相关的API文档（https://echarts.apache.org/zh/option.html#series-map）中找到更多的参考资料。 总结起来，你需要引入echarts包和对应的省份地图，将echarts挂载到Vue的原型上，并在Vue组件中使用echarts的API来实现获取省份地图的功能。希望这些信息对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue - vue使用echarts实现中国地图和点击省份进行查看](https://blog.csdn.net/qq_43886365/article/details/128102076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue echarts 3D地图+省+弹窗](https://blog.csdn.net/coldriversnow/article/details/117927061)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值