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 厦门市地图矢量数据js
06-28
echarts 厦门市地图矢量数据js
利用pyecharts库对京津冀上广深空气质量数据进行可视化
weixin_43620493的博客
05-17 3115
本文以当前热门编程语言Python作为开发工具，利用Python的BeautifulSoup库进行网页爬虫以获取空气质量数据（AQI、PM2.5），然后综合运用第三方库Pandas进行数据处理，最后利用Python的pyecharts库对空气质量数据进行可视化图形的呈现，该设计具体实现了京津冀上广深空气质量数据的爬取、处理以及图形的输出。
vue2.0+echarts实现多省份地图加双柱状图展示（保姆级教程）
最新发布
simpleMan8023的博客
07-25 496
首先放效果图 开始之前我默认您已成功下载和导入相关插件打开 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6 鼠标点击你想要的省份 然后在右边根据需要看是否勾选（包含子区域），如果勾选了就会有市地区级的坐标，我这个项目是不需要的，所以不勾选，然后根据需要点击第三行------其他类型 点击下载保存 你会得到该省份的 文件 ，然后依次下载需
echarts 地图 区域合并
m0_52775179的博客
03-02 1056
echarts 地图 区域合并
echarts地图合并(省和省合并，市和市合并，省和市合并)
tempuser78的博客
10-17 3008
echarts地图合并(省和省合并，市和市合并，省和市合并) //获取要合并地图的数据 $scope.getMergeMapData = function () { // var areaArr = [{pro:'湖北',city:[]}] // var areaArr = [{pro:'广东',city:['潮州市','揭阳市','汕头市','汕尾市']}] ...
关于echarts自定义合并中国地图分区展示的问题
qq_39262820的博客
06-22 1341
其实为了自己能够记住所遇到的问题，然后也是为了以后方便查找，开始决定尝试第一次写自己的博客。当然很多东西也是自己查找借鉴他人才最终解决的问题，所以在此也非常感谢他人的分享。本人前端小白一个，半路转行从事前端，希望以后能在这条路上一直走下去。 正题：因公司需求，需要对中国地图进行分区展示，而且是公司自己内部自定义的分区。 <div class="echarts-map"> <div class="echarts-map-box" id="echartsMapBox" s
ECharts合并地图上的区域
ddyy2695734664的博客
02-18 2638
对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。 于是就需要对官方提供的地图数据进行修改。 一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。 实际上，直接将这三个省的轮廓点合并即可...
echarts各省份地图合并成一个JS文件
03-02
echarts各省份地图合并成一个JS文件，只需引入一个就可以用所有省份的地图，文件还兼容了echarts4.0
echarts地图json数据，全国个省份主要城市经纬度数据文件
06-21
ECharts 是一个基于 JavaScript 的开源可视化库，广泛用于制作各种数据图表。在 ECharts 中，地图图表（maps）...在实际应用中，可以根据需求加载不同的省份地图数据文件，或者通过合并多个文件来展示多个省份的地图。
echarts 全国以及各省市的地图数据js与json合并版下载
01-04
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够轻松实现各种复杂的可视化需求。在本压缩包文件中，包含的是ECharts3中关于全国及各...
echarts全国省市合并js和json
12-21
在"echarts全国省市合并js和json"这个主题中，主要涉及到的是如何使用ECharts来绘制中国地图，并展示各个省份和城市的数据。 首先，我们要理解ECharts地图图表的工作原理。ECharts中的地图数据通常是以JSON格式存储...
Echarts山东地图（济南莱芜合并后的）.zip
03-19
ECharts地图组件能够渲染出中国各个省份、城市、区县的地理信息，包括颜色填充、标注等，非常适合用于数据分布的展示。 在这个压缩包里，关键文件可能是“Echarts最新山东地图（济南莱芜合并后的）”，这可能是一个...
echarts绘制地图
热门推荐
hjh15827475896的博客
08-22 1万+
第二种方法绘制地图是使用 json 数据， 这种方法更灵活一些， 可以绘制不同省份，市区，等的地图，上面的是 国家的地图， 那么这里的 使用json数据的方法可以绘制更小的地方的地图。从echart 的文档上来看， 我们在echart中使用 geo 和 使用 series 来绘制地图，它们之间有一点细微的差别，可以忽略不计。从站点上可以看到， 我们可以选择 是下载全国的数据， 还是下载某一个省的json数据， 我们这里只使用湖北省襄阳市的试试。两中方法都是可以了， 随便选择就可以了。
echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
weixin_46174785的博客
12-16 2399
安装echarts yarn add echarts 效果图： 获取任意省市县数据来源json格式 注意： 这里在请求在写地图数据的时候，我采用的是JQ。使用axios的话会出现错误信息; 废话不多说，看代码效果： <template> <div id="container"></div> </template> <script> import echarts from "echarts"; import $ from "jquer
ECharts合并地图上的区域（济南市合并莱芜市）
weixin_45510256的博客
05-29 1672
这里写自定义目录标题ECharts合并地图上的区域（济南市合并莱芜市）新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 ECharts合并地图上的区域（济南市合并莱芜市） 将两个的coordinates，encodeOffs
Echarts合并多省市地图JSON文件方法
qq_43399427的博客
10-29 4012
*Echarts获取多省市地图JSON文件方法 最近在学习用echarts插件进行地图显示，当我想要获取两个或者以上省的一块大地图的时候，发现好像没有可以直接生成的，最后摸索出来了一个比较实用的方法，仅供参考。(以苏皖两省为例) step1:单独下载两省地图JSON文件 这里发现了一个大神做的网站，打开链接： https://hxkj.vip/demo/echartsMap/ 如图 通过左上角的选项可以选择你想要的区域，省市均可，点击下载geoJson数据按钮就下载好了。 下载完了之后，发现是geoJs
echarts map地图中绘制浙江省市区县乡镇多级联动边界下钻的最新geojson数据文件获取和更新
高坚果兄弟
12-09 2357
下载到的数据是最新的csv文件，同时下载一下开源库提供的转换工具，工具支持将csv数据转换成：shp、geojson、sql、导入数据库、坐标系转换，功能比较丰富，我们只需转成geojson即可。转换出来的geojson是一个大的文件，里面包含了全国省市区所有数据，我们在ECharts中一般是使用拆分的文件，每个区县一个文件这种，我们到工具的高级功能中拆分这个大的文件成小文件
echarts自定义地图总结(VUE)
zhufan2333的博客
07-21 2842
echarts自定义地图区域实现。地图Json分离、合并。将一个省拆分为两个省。现在打开下载好的自定义json发现地市之间有分界线，需求要求在原先的中国地图上以整体来呈现，接下来就要实现合并。想要实现地图区域合并，重点在于地图Json合并。...
Echarts 多个地区地图可视化显示
speedwalkman的专栏
03-18 2664
Echarts 多个地区地图可视化显示。怎么在echart上同时显示不同多个省份，不同多个城市，不同的多个县区
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、付费专栏及课程。

余额充值