Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法

Bertha 。 2023-10-13 13:48 11阅读 0赞

**目录**

背景

一、相关数据

1、湖南省2021全省地区生产总值

2、湖南Geojson数据

二、Ruoyi集成设计与实现

1、自定义地图注册

2、湖南地图引用

3、图表初始化及数据绑定

4、实际效果

总结

--------------------

## 背景 ##

在之前博客中，介绍了Echarts和Ruoyi集成的一些博客[基于Echarts2.X的地图数据可视化指南][Echarts2.X]，以及[解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题][Ruoyi_Echarts_Tab]，其实关于Echars有许多的知识点，在项目开发过程中，也是经常容易碰到问题。比如有一些小伙伴需要在Ruoyi的单体化版本中集成自定义地图进行可视化分析。Ruoyi中使用的Echars版本是4.2.1，在2.x的版本中，其内置了基础地图，用户可以直接使用即可，二从3的版本开始陆续由于地图的版图问题，不再提供所有地图，Ruoyi带的4.2.1版本中，初始注册了一个全国的地图信息。如果您想自定义，想使用湖南地图，应该怎么做呢？

本文将围绕如何在Echarts4.2.1版本中，如何在Ruoyi的单体化框架中，自由扩展地图应用，通过自定义地图，完成您的场景搭建。如果有地图集成的小伙伴，可以看看本文，如有帮助，不慎荣幸。本文将采用代码实例的方式进行全方面讲解，让读者可以全面掌握。

## 一、相关数据 ##

### 1、湖南省2021全省地区生产总值 ###

本例中以展示湖南省2021年全省各地区生产总值的空间可视化为例。具体数据可以从统计局相关官方可以获取，详细如下所示：

<table> 
 <tbody> 
 <tr> 
 <td colspan="3" style="text-align:center;vertical-align:middle;width:399.75pt;">2022年1-4季度各市州地区生产总值及增速</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;"></td> 
 <td style="border-color:#000000;text-align:center;vertical-align:middle;width:118.5pt;">地区生产总值 （亿元）</td> 
 <td style="text-align:center;vertical-align:middle;width:118.5pt;">增速 （%）</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">长沙市</td> 
 <td style="text-align:right;vertical-align:middle;">13966.11</td> 
 <td style="text-align:right;vertical-align:middle;">4.5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">株洲市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">3616.81</td> 
 <td style="text-align:right;vertical-align:middle;">4.5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">湘潭市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">2697.54</td> 
 <td style="text-align:right;vertical-align:middle;">4.6</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">衡阳市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">4089.69</td> 
 <td style="text-align:right;vertical-align:middle;">5.2</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">邵阳市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">2599.18</td> 
 <td style="text-align:right;vertical-align:middle;">4.7</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">岳阳市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">4710.67</td> 
 <td style="text-align:right;vertical-align:middle;">5.4</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">常德市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">4274.52</td> 
 <td style="text-align:right;vertical-align:middle;">4.5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">张家界市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">592.39</td> 
 <td style="text-align:right;vertical-align:middle;">2.3</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">益阳市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">2108.02</td> 
 <td style="text-align:right;vertical-align:middle;">4.6</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">郴州市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">2980.49</td> 
 <td style="text-align:right;vertical-align:middle;">5.7</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">永州市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">2410.28</td> 
 <td style="text-align:right;vertical-align:middle;">5.1</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">怀化市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">1877.64</td> 
 <td style="text-align:right;vertical-align:middle;">3.8</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">娄底市</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">1929.50</td> 
 <td style="text-align:right;vertical-align:middle;">4.8</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">湘西土家族苗族自治州</td> 
 <td style="border-color:#000000;text-align:right;vertical-align:middle;">817.53</td> 
 <td style="text-align:right;vertical-align:middle;">3.8</td> 
 </tr> 
 </tbody> 
</table>

### 2、湖南Geojson数据 ###

Ruoyi匹配的Echarts4.2.1版本注册的地图是全国地图，没有湖南的地图。可以从高德地图的公开数据中获取，地址如下[datav数据选择器][datav]，

![b4a267e0899447c68a92c5f22a2689c8.png][]

在页面中选择湖南省的数据信息，在选定区域后，可以直接下载geojson数据信息。

![acc36322cb63403f8228bd4f27bca039.png][]

将数据下载到本地后，保存待用。

## 二、Ruoyi集成设计与实现 ##

### 1、自定义地图注册 ###

在echarts-all.min.js文件中包含了默认地图的注册，如下图所示：

![28422aafdb3249a18ff885e2185c0d8e.png][]

在这里可以看到，使用 echarts.registerMap();将GeoJson注册到echarts中，同样的原理，我们可以将湖南地图注册到echarts中。方便后面使用。将湖南Geojson注册到echart中。

### 2、湖南地图引用 ###

定义地图map中的网页展示容器

### 3、图表初始化及数据绑定 ###

在进行地图信息的展示过程中，可以设置地图的初始层级，这里设置为1.2，表示为正常的1.2倍。

name: '地区生产总值',
    type: 'map',
    mapType: 'hunan',
    roam: false,
    zoom:1.2,//视觉比例大小,1.2即为原有大小的1.2倍
    itemStyle:{
    	 normal:{label:{show:true}},
    	 emphasis:{label:{show:true}}
    }

### 4、实际效果 ###

经过上述几个步骤，在页面中可以看到如下的效果，已经实现了我们的预期目标，使用自定义地图来进行湖南地区数据的可视化分析。

![4b01a042186b467d9caaa27ac8f662a3.png][]

![426f9e95808849f495ef8e61329dc26f.png][]

## 总结 ##

以上就是本文的主要内容，本文将围绕如何在Echarts4.2.1版本中，如何在Ruoyi的单体化框架中，自由扩展地图应用，通过自定义地图，完成自定义的场景搭建，帮助您快速实现项目需求。博文行文匆忙，难免有误，欢迎各位朋友批评指正。

[Echarts2.X]: https://blog.csdn.net/yelangkingwuzuhu/article/details/131445605
[Ruoyi_Echarts_Tab]: https://blog.csdn.net/yelangkingwuzuhu/article/details/131565407
[datav]: http://datav.aliyun.com/portal/school/atlas/area_selector
[b4a267e0899447c68a92c5f22a2689c8.png]: https://img-blog.csdnimg.cn/b4a267e0899447c68a92c5f22a2689c8.png
[acc36322cb63403f8228bd4f27bca039.png]: https://img-blog.csdnimg.cn/acc36322cb63403f8228bd4f27bca039.png
[28422aafdb3249a18ff885e2185c0d8e.png]: https://img-blog.csdnimg.cn/28422aafdb3249a18ff885e2185c0d8e.png
[4b01a042186b467d9caaa27ac8f662a3.png]: https://img-blog.csdnimg.cn/4b01a042186b467d9caaa27ac8f662a3.png
[426f9e95808849f495ef8e61329dc26f.png]: https://img-blog.csdnimg.cn/426f9e95808849f495ef8e61329dc26f.png