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

本文记录如何利用Echarts自带的北京、天津、河北地图数据,通过组合坐标,创建自定义的京津冀地图。做法简单,适用于需要展示特定区域地图的场景。
摘要由CSDN通过智能技术生成

需求背景

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

做法思路

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

效果图

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

下载链接

在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、付费专栏及课程。

余额充值