echarts 有涟漪效果的地图（带注释可直接使用，绝对详细）

最新推荐文章于 2024-10-10 14:08:08 发布

池塘鱼

最新推荐文章于 2024-10-10 14:08:08 发布

阅读量7.6k

点赞数 8

分类专栏：大数据文章标签：数据可视化 java

本文链接：https://blog.csdn.net/qq_41984887/article/details/106531175

版权

本文记录了如何使用Echarts结合百度地图API创建一个具有涟漪效果的地理分布展示，展示网站用户在全国各地区的分布。文章详细介绍了从获取地图API、引入所需文件、准备容器到编写配置项的步骤，并提供了数据获取和处理的方法。

摘要由CSDN通过智能技术生成

做项目用到了echarts的地图，结合散点展示数据，研究一番后实现需求并成功运行，记录以备用。因为查资料和修改代码还是费了点时间的，因此写出来如果有人能用到也挺好的，不走我走过的弯路。o(￣▽￣)ｄ

介绍

我的需求：通过地图展示某网站的用户在全国各个地区分布情况的统计结果，因此地区的坐标和数据都不能是写死的，要动态查询获取。为了美观一点，不那么死板，加入涟漪效果。

参考了官网的案例（https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-map），做出了一些修改。

运行效果如图：
在这里插入图片描述
当鼠标悬浮在点上的时候可以显示其对应的数据。

背景色、地图颜色、散点的颜色、文字颜色等都可以根据自己的需求修改。我会根据自己的摸索结果写在注释里面。

为了使数据更直观，我又使用了一个柱状图展示同样的数据，柱状图的配置和地图的配置基本是独立的，可以选择不要柱状图这部分。
在这里插入图片描述

理解

数据的获取：

运行这个图需要两方面数据。

一是有数据的地区的经纬度，为了使结构清晰，便于修改，我将经纬度的数据放在了一个json文件里，将该json文件放在了项目的webapp下面，使用ajax访问此文件获取数据。

二是该地区要展示的数据，我将其存在了本地的mysql数据库里，页面使用ajax去Controller获取数据，使用SSM编写三层结构，Dao层使用MyBatis获取数据，然后一层层返回给ajax。
数据的设置：将地区名、该地区的经纬度坐标和该地区的数据三者封装到一个Object对象里，若干个这样的对象存到数组里面，作为配置项series的data的参数。
实现步骤：
a. 去申请一个百度地图的 apikey。
b. 引入需要的若干js文件（可参考下面的代码）。
c. 准备一个设置了宽高的空容器。
d. 写js代码：获取数据，创建echarts实例，根据自己的需求编写option配置项，将option设置给实例。

代码

1.申请百度地图的apikey

http://lbsyun.baidu.com/apiconsole/key#/home
在这里插入图片描述

2. 需要引入的文件：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> //echarts.js也可以换成自己下载的js文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=OMlwEbXXXXXXXXXX0GcmVCn8mubTI"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

倒数第二个script用到了申请的百度地图的apikey，我这里打码了，大家填写自己的apikey即可。
在这里插入图片描述

3. 准备设置了宽高的空容器

<div id='chinaClient' style='height:800px;width:100%;'></div> //地图的容器
 <div id='clientBar' style='height:600px;width:100%;'></div> //柱状图的容器

4. 配置option

//创建实例
var dom = document.getElementById("chinaClient"); //****将此id更换为自己的容器id****
var myChart4 = echarts.init(dom);

		//获取要展示的数据
		var data = [];
        $.ajax({
   
            url:"${pageContext.request.contextPath}/webUser/getProvincePersonNumData",
            type:'GET',
            async: false,
            dataType:"json"

最低0.47元/天解锁文章