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

这篇具有很好参考价值的文章主要介绍了Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

背景

一、相关数据

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

2、湖南Geojson数据

二、Ruoyi集成设计与实现

1、自定义地图注册

2、湖南地图引用

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

4、实际效果

 总结


背景

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

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

一、相关数据

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

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

2022年1-4季度各市州地区生产总值及增速
地区生产总值
(亿元)
增速
(%)
长沙市 13966.11 4.5
株洲市 3616.81 4.5
湘潭市 2697.54 4.6
衡阳市 4089.69 5.2
邵阳市 2599.18 4.7
岳阳市 4710.67 5.4
常德市 4274.52 4.5
张家界市 592.39 2.3
益阳市 2108.02 4.6
郴州市 2980.49 5.7
永州市 2410.28 5.1
怀化市 1877.64 3.8
娄底市 1929.50 4.8
湘西土家族苗族自治州 817.53 3.8

2、湖南Geojson数据

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

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法,js,若依echarts扩展,echarts4.x地图注册

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

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法,js,若依echarts扩展,echarts4.x地图注册

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

二、Ruoyi集成设计与实现

1、自定义地图注册

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

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法,js,若依echarts扩展,echarts4.x地图注册

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

2、湖南地图引用

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

<div class="ibox float-e-margins">
	<div class="ibox-title">
		<h5>中国地图</h5>
		<div class="ibox-tools">
		<a class="collapse-link">
			<i class="fa fa-chevron-up"></i>
		</a>
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			<i class="fa fa-wrench"></i>
		</a>
		<ul class="dropdown-menu dropdown-user">
			<li><a href="#">选项1</a></li>
			<li><a href="#">选项2</a></li>
		</ul>
		<a class="close-link">
			<i class="fa fa-times"></i>
		</a>
		</div>
		</div>
		<div class="ibox-content">
			<div style="height:600px" id="echarts-map-chart"></div>
		</div>
	</div>

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

var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
var mapoption = {
	title : {
	    text: '湖南省2022年1-4季度各市州地区生产总值',
	    subtext: '数源来源国家统计局,单位:亿元',
	    x:'left'
	  },
	  tooltip : {
	       trigger: 'item'
	  },
	  legend: {
	       orient: 'vertical',
	       x:'right',
	       y:'center',
	       data:['地区生产总值']
	   },
	   dataRange: {
	        min: 0,
	        max: 13967,
	        x: 'left',
	        y: 'bottom',
	        text:['高','低'],           // 文本,默认为数值文本
	        calculable : true
	    },
	    toolbox: {
	       show: true,
	       orient : 'vertical',
	       x: 'right',
	       y: 'bottom',
	       feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            restore : {show: true},
	              saveAsImage : {show: true}
	            }
	       },
	       roamController: {
	           show: true,
	           x: 'right',
	           mapTypeControl: {
	               'hunan': true
	           }
	       },
	       eries : [
	           {
	             name: '地区生产总值',
	             type: 'map',
	             mapType: 'hunan',
	             roam: false,
	             zoom:1.2,//视觉比例大小,1.2即为原有大小的1.2倍
	             itemStyle:{
	                  normal:{label:{show:true}},
	                  emphasis:{label:{show:true}}
	              },
	              data:[
	                 {name: '长沙市',value: 13966.11},
	                 {name: '株洲市',value: 3616.81},
	                 {name: '湘潭市',value: 2697.54},
	                 {name: '怀化市',value: 1877.64},
	                 {name: '郴州市',value: 2980.49},
	                 {name: '岳阳市',value: 4710.67},
	                 {name: '常德市',value: 4274.52},
	                 {name: '娄底市',value: 1929.5},
	                 {name: '永州市',value: 2410.28},
	                 {name: '邵阳市',value: 2599.18},
	                 {name: '衡阳市',value: 4089.69},
	                 {name: '张家界市',value: 592.39},
	                 {name: '湘西土家族苗族自治州',value: 817.53},
	                 {name: '益阳市',value: 2108.02}
	                ]
	               }
	            ]
	        };
	mapChart.setOption(mapoption);
	$(window).resize(mapChart.resize);
	charts.push(mapChart);

在进行地图信息的展示过程中,可以设置地图的初始层级,这里设置为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、实际效果

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

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法,js,若依echarts扩展,echarts4.x地图注册

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法,js,若依echarts扩展,echarts4.x地图注册

 总结

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

到了这里,关于Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/yelangkingwuzuhu/article/details/131613002

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包