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模板网!

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

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

相关文章

  • vue项目中使用echarts和china.js实现中国地图

    在echarts最新的5.4.0版本中,已不能直接引用china.js来绘制中国地图,需要我们自己下载china.js包 在网上查找资料,大部分是在index.html文件中直接引入echarts和china.js文件,但我使用这种方法在vue项目中引入失败,目前尝试可行的方法是把包下载到node_modules的echarts包里面,文件和

    2024年02月13日
    浏览(39)
  • 【ECharts】从零实现echarts地图完整代码(纯前端,包含地图资源)

    这里忽略创建vue项目的操作过程,请自行搭建 vue2 项目 、 less 环境 安装下载 echarts 这里我们选择npm下载 安装成功后,在 main.js 中把echarts配置到this上 这里我建立了一个地图的组件,放在 hnMap 中 获取地图渲染json文件 这里我是通过下述的网址下载需要的地图 json 文件到本地

    2024年02月03日
    浏览(53)
  • springboot 集成caffeine单体缓存两种方式及算法简介 (注解/手动)

           Caffeine 是基于 JAVA 8 的高性能缓存库。并且在 spring5 (springboot 2.x) 后,spring 官方放弃了 Guava,而使用了性能更优秀的 Caffeine 作为默认缓存组件。        Caffeine 因为使用了  Window-TinyLFU  缓存淘汰策略,提供了一个 近乎最佳的命中率 。综合了 LRU 和 LFU 算法的长处,

    2024年02月03日
    浏览(43)
  • echarts地图 可视化大屏使用echarts-map实现地图轮播效果

    记录一下大屏开发中使用到的echartsMap 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了 初始效果 效果图: 适应大屏风格的发光地图效果,用了两个图层实现叠加背景图片实

    2024年02月16日
    浏览(38)
  • ruoyi cloud集成casdoor

            之前写过一篇关于ruoyi cloud集成cas的但是使用的apereo的单点登录,该应用的文档都是英文文档,尝试一下集成casdoor,其官方文档比较详细。 考虑到有些小伙伴上git不方便,需要用到的代码和Windows工具,都在这了         Go 1.6+ Node.js LTS (16或14) 这里我使用的是

    2024年02月07日
    浏览(36)
  • Echarts中国地图与世界地图实战

    Echarts中中国地图与世界地图实战,完整代码。 其中 china.js 与 world.js 两个文件已通过CDN的方法给出,而 echarts.js 大家可以自行去官网下载。 echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单。 版本区别: 1.完全版:ec

    2024年02月03日
    浏览(88)
  • echarts地图组件-地图纹理、地图3D投影、多个geo缩放同步

    1.实现效果: 2.实现代码: ①geo:{ // geo设置,outShadow为是否开启3D阴影;若开启,则layoutCenter要设置大一点偏移造成底部外框阴影效果,areaColor是区块的颜色,shadowColor是阴影的颜色 { map: \\\"jiangxi\\\", layoutCenter: this.option.outShadow ? [\\\"50%\\\", \\\"51.5%\\\"] : [\\\"50%\\\", \\\"50%\\\"], //地图位置 layoutSize: \\\"11

    2024年02月04日
    浏览(40)
  • 【地图可视化】Echarts地图上展示3D柱体

    这是以前有这方面可视化的需求做的,找了很多资料,最后感觉这样的效果比较满意。 效果展示  以下以江苏省的地图为例: 数据准备 对于想要做3d效果的地区,需要准备对应的json文件 可以在这个网站上下载,数据最小粒度可以具体到县: DataV.GeoAtlas地理小工具系列 这里

    2023年04月19日
    浏览(47)
  • echarts实现中国地图记录篇之2D,3D地图

    工具: 实现2D平面地图需要用到的包为:echarts 实现3D地图需要用到的包为:echarts,echarts-gl 版本 —— echarts5.0+和5.0以下版本的差异: echarts 5.0以下的版本,做中国地图,推荐使用\\\"echarts\\\": \\\"^4.9.0\\\"版本,安装、引入和使用方式,如下: Echarts官方在5+版本中移除了echarts/map/js/china.

    2023年04月08日
    浏览(35)
  • echarts地图3D效果

     

    2024年02月11日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包