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

最新推荐文章于 2023-03-02 14:57:55 发布
最新推荐文章于 2023-03-02 14:57:55 发布
阅读量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
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts地图合并(省和省合并，市和市合并，省和市合并)
tempuser78的博客
10-17 2951
echarts地图合并(省和省合并，市和市合并，省和市合并) //获取要合并地图的数据 $scope.getMergeMapData = function () { // var areaArr = [{pro:'湖北',city:[]}] // var areaArr = [{pro:'广东',city:['潮州市','揭阳市','汕头市','汕尾市']}] ...
echarts各省份地图合并成一个JS文件
03-02
echarts各省份地图合并成一个JS文件，只需引入一个就可以用所有省份的地图，文件还兼容了echarts4.0
echarts地图扩展文件使用geoJson格式。
热门推荐
white__cat的专栏
09-06 1万+
echarts地图扩展文件使用geoJson格式。 1、在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json，但是最多生成到”区县”粒度 2、用arcmap生成 - 基于arcmap做好地图，并存为EsriJSON格式 - 然后到 http://esritogeo.herokuapp.com/ 将得到的json文件转
Echarts3之全国地图和省市地图二合一整合
ZT的专栏
09-20 9616
没图说个ji  先上图 开始接触时是echarts 2 ，echarts升级至echarts 3 之后没怎么接触，通过介绍了解到，echarts3变得更加人性化，将一些底层的方法开放出来，增加的echarts的扩展性。 很遗憾echarts3并没有提供市级的地图的demo。 于是将echarts2中的demo直接拿来改 下面是代码：希望能帮助到你 ECharts
ECharts合并地图上的区域
ddyy2695734664的博客
02-18 2594
对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。 于是就需要对官方提供的地图数据进行修改。 一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。 实际上，直接将这三个省的轮廓点合并即可...
echarts 地图 区域合并
m0_52775179的博客
03-02 1021
echarts 地图 区域合并
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 切分合并修改地图区域教程手册+工具
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
Echarts合并多省市地图JSON文件方法
qq_43399427的博客
10-29 3803
*Echarts获取多省市地图JSON文件方法 最近在学习用echarts插件进行地图显示，当我想要获取两个或者以上省的一块大地图的时候，发现好像没有可以直接生成的，最后摸索出来了一个比较实用的方法，仅供参考。(以苏皖两省为例) step1:单独下载两省地图JSON文件 这里发现了一个大神做的网站，打开链接： https://hxkj.vip/demo/echartsMap/ 如图 通过左上角的选项可以选择你想要的区域，省市均可，点击下载geoJson数据按钮就下载好了。 下载完了之后，发现是geoJs
Js拼接Json供echarts的地图使用
不要怕
02-28 760
需求:使用Echarts的地图显示数据时，后端传过来的数据格式，与期望的不同，需要重新拼接Json。 需要这样样子的数据格式 maps_data = { "max": 2936, "data": [{ "value": 695, "name": "陕西" }, { "valu.
echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
weixin_46174785的博客
12-16 2351
安装echarts yarn add echarts 效果图： 获取任意省市县数据来源json格式 注意： 这里在请求在写地图数据的时候，我采用的是JQ。使用axios的话会出现错误信息; 废话不多说，看代码效果： <template> <div id="container"></div> </template> <script> import echarts from "echarts"; import $ from "jquer
关于echarts自定义合并中国地图分区展示的问题
qq_39262820的博客
06-22 1280
其实为了自己能够记住所遇到的问题，然后也是为了以后方便查找，开始决定尝试第一次写自己的博客。当然很多东西也是自己查找借鉴他人才最终解决的问题，所以在此也非常感谢他人的分享。本人前端小白一个，半路转行从事前端，希望以后能在这条路上一直走下去。 正题：因公司需求，需要对中国地图进行分区展示，而且是公司自己内部自定义的分区。 <div class="echarts-map"> <div class="echarts-map-box" id="echartsMapBox" s
vue echarts 获取省份地图
最新发布
08-15
import echarts from "echarts/lib/echarts" import "echarts/map/js/province/hubei.js"; ``` 接下来，你需要在main.js文件中引入echarts并将其挂载到Vue的原型上。你可以使用以下代码实现： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值