![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/d1676abfb964b427a3b743a762288b0d.png)
前段时间,负责的项目上有一个开发 echarts 地图需求,有了之前的经验,配置地图相对来说简单很多。
但是这次要求在地图上铺设散点,这个是之前没有做过的,单独开发地图或者单独开发散点图难度都不是很大,但两种图形结合起来,还需要自定义,这就需要研究一下了。
通过这篇文章你可以学会如何在地图上自定义显示散点。
1、初始化地图
这里地图以广州市地图为例。首先获取广州市地理 json 文件,通过 registerMap 方法初始化地图。正常情况下,地图数据应为请求后台返回的。
![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/8df09a0e08fb5c694b67452913b4d8df.png)
2、设置散点坐标及数据
散点也是根据坐标来铺设。坐标是必须的,需要显示哪些数据,可以根据不同的业务需求来初始化。
![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/70a92fdda727010eed240a2eefbbfe69.png)
正常情况下,散点坐标和数据也应该是后台返回,案例中的 converData 方法,是将散点 value 和坐标拼接在了一起,方便查看效果而已。
3、添加散点图配置和地图配置
![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/0d645d462630dcf3c8e881c5173d1711.jpeg)
series (系列列表配置)中添加两个图表配置,通过修改 type 值,决定图表类型(散点图和地图),具体细节配置选项请参看官方 echarts 文档。
案例源码已上传 https://github.com/zhangqian00/echarts-map-scatter
如果觉得有帮助,就分享给你觉得需要的朋友吧!
![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/053a817d007da813eb60d2b14734023a.png)
前端公众号【前端很忙】
如何自定义地图,可以查看往期文章: