在Ruoyi中采用Ajax动态生成Echarts图表实践

已于 2023-08-05 00:08:01 修改
阅读量1.1w 收藏 62
点赞数 55
分类专栏： js 文章标签： echarts ajax动态图表 java后端生成统计图
于 2023-08-05 00:06:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelangkingwuzuhu/article/details/132113869
版权

前言

        在之前博文中，我们讲解了如何使用java在后台进行Echarts的图表生成组件，博文如下：

序号

博客连接
1一款基于JAVA开发的Echarts后台生成框架
2Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法
3解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题

        在之前的博客中，比较分散的介绍了Echarts图表的生成。但是在生成图表时，数据源信息基本上都是提前设定好的，相当与静态数据。针对于动态数据接入的场景，比如需要通过ajax动态获取后台的数据，然后将数据设置到前端的图表组件中。本文将以Ruoyi框架为例，深入讲解基于Ajax技术，实现数据的动态接入，让读者了解如何进行数据的动态接入代码实战开发。

一、Maven依赖定义

        演示项目采用Maven依赖的方式定义，在这里需要引入Echarts的Java后台生成组件和Gson包，Gson是用于生成echarts组件的依赖包，请确保添加。

<!-- 增加Echarts java统一处理类 -->
<dependency>
	<groupId>com.github.abel533</groupId>
	<artifactId>ECharts</artifactId>
	<version>3.0.0</version>
</dependency>
		
<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
	<version>2.6.2</version>
</dependency>

二、数据模拟生成

        为了演示简单，这里仅使用Java模拟数据查询的方式进行数据构造。实际情况下，需要根据到数据库中查询实际的数据。本例子中演示的场景为查询上个月某部门的短信发送量信息。

        这里分两个函数实现，第一个函数是生成上个月每一天的时间戳，方便在Echarts图表中进行展示。方法如下，这里需要注意的是上个月采用日历类-1获得：

private List<String> getEveryDayOfMonth() {
		List<String> result = new ArrayList<String>();
		//获取Calendar
		Calendar calendar=Calendar.getInstance();
		calendar.set(Calendar.DAY_OF_MONTH, 1);
		calendar.add(Calendar.MONTH, -1);//获取上个月
		Date startDate = calendar.getTime();
		//设置日期为本月最大日期
		calendar.set(Calendar.DATE, calendar.getActualMaximum(Calendar.DATE));
		Date endDate = calendar.getTime();
		
		while(startDate.getTime() <= endDate.getTime()){
			String dayStr = DateUtils.parseDateToStr("yyyy-MM-dd", startDate);
			result.add(dayStr);
			calendar.setTime(startDate);
			calendar.add(Calendar.DATE,1);
			Date tempDate = calendar.getTime();
			startDate = tempDate;
		}
		return result;
	}

        在此基础上，我们进行月份内，每天的信息发送数据模拟，生成Echarts对象。

public String buildOrgzSendSmsCount(String orgzName) {
		String result = "";
		List<String> dateList = this.getEveryDayOfMonth();
		
		GsonOption option = new GsonOption();
		option.title().text("【" + orgzName + "】上月短信统计（单位：条）");
        option.tooltip().trigger(Trigger.axis);
        option.legend("短信发送量");
        option.legend().y(Y.bottom).padding(0);
        option.toolbox().show(true).feature(new MagicType(Magic.line, Magic.bar).show(true), Tool.saveAsImage);
        option.calculable(true);
        
        List<String> months = new ArrayList<String>();
        List<Integer> sendCounts = new ArrayList<Integer>();
        
        Random random = new Random();
        
        for (String date : dateList) {
        	months.add(date);
        	sendCounts.add(random.nextInt(100));
		}
	        
        CategoryAxis categoreAxis = new CategoryAxis();
        categoreAxis.data(months.toArray()).axisLabel().interval(0).rotate(30);
        
        option.xAxis(categoreAxis);
        option.yAxis(new ValueAxis());

        Bar bar = new Bar("短信发送量");
        bar.data(sendCounts.toArray());
        bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
        bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

        option.series(bar);
        result = option.toString();
	        
		return result;
	}

三、后台接口调用

        后台采用开放接口形式对外提供调用，为了演示方便，不加入过多的参数，实际情况根据需要传递相关参数即可，这里需要注意的是，在使用AjaxResult对象进行输出的时候，返回的json参数使用data进行携带。

@PostMapping("/echarts/getmsgsendchart")
@ResponseBody
public AjaxResult msgSendChart(){
    String charts = echartService.buildOrgzSendSmsCount("信息技术部");
    AjaxResult result = AjaxResult.success();
    result.put("data", charts);
    return result;
}

四、Html5网页定义

        在html页面中采用如下的代码进行短信发送量图表对象的定义，关键代码如下，注意这里的图表高度直接设定为200px：

<div id="tab-4" class="tab-pane">
     <div class="panel-body">
          <div class="row">
			<div class="col-sm-12">
				<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:200px" id="echarts-msgsend-chart"></div>
						      </div>
						   </div>
					</div>
				</div>
            </div>
    </div>

五、Ajax数据初始化

        采用Jquery+bootstrap进行图表初始化，

msgsendChart = echarts.init(document.getElementById("echarts-msgsend-chart"));
$(window).resize(msgsendChart.resize);
charts.push(msgsendChart);
initMsgSendChart();
function initMsgSendChart(){
	$.ajax({
		    type: "POST",
		    url: ctx + "/demo/report/echarts/getmsgsendchart",
		    data: {},
		    dataType : "json",
		    success: function(serverdata){
		    	if(serverdata != ""){
		    		var serverJsonData = eval('('+serverdata.data+')');
		    		msgsendChart.setOption(serverJsonData,true);
		    		$(window).resize(msgsendChart.resize);
		    	}
		    },
		    error:function(data){
		    		parent.layer.alert('系统发生错误！', {icon: 5});
		    	}
	    });
}

        以上代码需要注意的是，var serverJsonData = eval('('+serverdata.data+')');这里使用eval函数进行参数转换，同时需要注意的是，serverdata.data;后面的data即是之前提到过的后台返回AjaxResult中的key。

六、图表展示及过程分析

        模拟短信发送量统计柱状图页面展示效果。 

 来看下具体的接口请求情况：

{"msg":"操作成功","code":0,"data":"{\"calculable\": true,\"title\": {\"text\": \"【信息技术部】上月短信统计（单位：条）\"},\"toolbox\": {\"feature\": {\"magicType\": {\"show\": true,\"title\": {\"bar\": \"柱形图切换\",\"stack\": \"堆积\",\"tiled\": \"平铺\",\"line\": \"折线图切换\"},\"type\": [\"line\",\"bar\"]},\"saveAsImage\": {\"show\": true,\"title\": \"保存为图片\",\"type\": \"png\",\"lang\": [\"点击保存\"]}},\"show\": true},\"tooltip\": {\"trigger\": \"axis\"},\"legend\": {\"data\": [\"短信发送量\"],\"y\": \"bottom\",\"padding\": 0},\"xAxis\": [{\"type\": \"category\",\"axisLabel\": {\"interval\": 0,\"rotate\": 30},\"data\": [\"2023-07-01\",\"2023-07-02\",\"2023-07-03\",\"2023-07-04\",\"2023-07-05\",\"2023-07-06\",\"2023-07-07\",\"2023-07-08\",\"2023-07-09\",\"2023-07-10\",\"2023-07-11\",\"2023-07-12\",\"2023-07-13\",\"2023-07-14\",\"2023-07-15\",\"2023-07-16\",\"2023-07-17\",\"2023-07-18\",\"2023-07-19\",\"2023-07-20\",\"2023-07-21\",\"2023-07-22\",\"2023-07-23\",\"2023-07-24\",\"2023-07-25\",\"2023-07-26\",\"2023-07-27\",\"2023-07-28\",\"2023-07-29\",\"2023-07-30\",\"2023-07-31\"]}],\"yAxis\": [{\"type\": \"value\"}],\"series\": [{\"name\": \"短信发送量\",\"type\": \"bar\",\"markPoint\": {\"data\": [{\"name\": \"最大值\",\"type\": \"max\"},{\"name\": \"最小值\",\"type\": \"min\"}]},\"markLine\": {\"data\": [{\"name\": \"平均值\",\"type\": \"average\"}]},\"data\": [60,87,89,81,69,65,89,45,1,29,25,27,24,79,50,23,20,8,60,72,31,61,7,10,57,5,65,74,64,29,4]}]}"}

总结

        以上就是本文的主要内容，本文将以Ruoyi框架为例，深入讲解基于Ajax技术，实现数据的动态接入，让读者了解如何进行数据的动态接入代码实战开发。行文仓促，难免有许多问题，欢迎朋友们批评指正。

夜郎king
关注
  • 55
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 75
    评论
专栏目录
大屏图表（echarts）数据统计分析页面
05-17
大屏图表（echarts）数据统计分析页面，地图分析、图标分析
RuoYiCloud.rar
08-20
RuoYiCloud 打包部署程序，包含了 sentinel 限流服务
若依框架生成Echarts柱状图（前后端不分离版本）
weixin_53422318的博客
07-05 3919
今天记录一下刚入职的公司的需求，根据每日核酸采样数量生成Echart图片 刚刚接触若依框架以及Echarts，若有不足以及可优化的地方，欢迎大佬指点实体类中创建了一个num和day变量用来接收每天的采样总量和日期 实体类： Mapper: sql是查询根据日期去分组查询出当天的采样数量，求和（因为数据中可能存在当天统计多次采样情况）然后根据日期排序，保证日期的顺序 这里主要是将数据库中的日期和当月的日期进行比对，来确定月份，但是后来我考虑到一个问题，可能后续会出现bug的情况，加入采样情况是30号导入的，1
若依分离版 —引入echart连接Springboot后端
最新发布
鲸鱼姐的专栏
03-27 563
若依分离版 —引入echart连接Springboot后端
若依框架+Ajax实现柱状图和饼图
噗嗤
12-09 1726
若依框架+Ajax实现柱状图和饼图 设置跳转按钮 echartsFull()方法出发事件，跳转 echartsFull: function() { table.set(); var url = table.options.echartUrl; $.modal.openFull("图" + table.options.modalName, url); }, 当我触发这个事件就会跳转到指
若依框架做柱形图，根据用户创建时间，统计每个月的人数的柱形图，参考的是Apache ECharts
cgwxzg的博客
05-19 1281
若依框架做一个柱形图，根据若依注册人数和注册月份。
三大架构图—结合若依权限管理系统
一起加油吧~
05-13 9011
若依管理系统是很多开发人员都熟知的，它帮助我们快速的站在巨人的肩膀上进行业务上的扩展，这里我结合若依权限管理来展示一下我画的技术架构图
本项目基于RuoYi进行搭建，在若依基础上进行功能构建、数据连接
06-06
此项目为模拟风电场监控项目，模拟一个电厂、六台风机，数据采用随机数实时插入到时序数据库中，再由websocket+quartz从时序数据库中取出推送到界面展示。其中统计信息存放在关系型数据库中。
若依项目整合eCharts实现图表统计功能
51yunOA
03-21 1万+
eCharts是一款强大的图表统计工具，具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts。 1、下载eCharts，地址为：http://echarts.baidu.com/download.html 此处需要选择【完整】版的，另外如果需要调试的话，可以选择【源代码】版。 ...
Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法
夜郎King的博客
07-08 1万+
本文将围绕如何在Echarts4.2.1版本中，如何在Ruoyi的单体化框架中，自由扩展地图应用，通过自定义地图，完成自定义的场景搭建，帮助您快速实现项目需求。
解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题
夜郎King的博客
07-05 1万+
本文重点讲解在Ruoyi的单体化版本中，将echarts图表放置到tab中后，界面进行tab切换时，图表无法正常展示的问题，以及如何去解决这些问题。希望本文可以帮助同样在使用Ruoyi单体架构开发Echarts的应用的朋友们来避免这些问题，提供一种解决思路。
RuoYi若依代码生成+一键部署
04-05
若依代码生成器很强大的，可以让我们写增删改查的效率大增。但是我在用的过程中总感觉还不够爽快。我想根据自己的想法改造一下。 总体来说操作还是有些繁琐的。我想实现的是只需要点一个按钮，就可以完成以上所有内容： - 下载代码 - 解压代码 - 复制前端代码 - 复制后端代码 - 自动执行菜单SQL - 编译代码并重启服务
计算机毕业设计源码：Flask汽车销量数据采集分析可视化系统
10-30
Flask汽车销量数据采集分析可视化系统（包含项目源码+数据库文件+文档）计算机毕业设计 项目介绍 Python语言、MySQL数据库、Flask框架、网络爬虫技术、html 车主之家数据、汽车销量数据 Flask汽车销售数据采集分析可视化系统是基于Flask框架开发的一个应用系统，旨在帮助用户采集、分析和可视化汽车销售数据。 数据采集：系统提供方便易用的界面，用户可以通过该界面输入和管理汽车销售数据。用户可以添加新的汽车销售记录，包括销售日期、销售地点、车型、销售数量、销售额等信息。系统还支持导入和导出数据，方便用户进行批量操作。 数据分析：系统内置多种数据分析工具，帮助用户深入了解汽车销售数据。用户可以选择特定时间范围或地区进行数据筛选，系统将生成相应的统计报表和图表，如销售额趋势图、热门车型排行榜、地区销售对比等。用户可以根据这些统计结果进行业务分析和决策。 可视化展示：系统提供丰富的可视化展示功能，将数据以直观的图表和图形展示给用户。用户可以通过柱状图、折线图、饼图、地图等方式直观地观察和比较销售数据。同时，用户可以根据自己的需求进行图表的定制和设置，以满足个性化的可视化
ruoyi-vue代码生成全
07-07
https://blog.csdn.net/kerafan/article/details/108903548
ajax返回值中有回车换行、空格的解决方法分享
12-18
最近在写一个页面，用jquery ajax来实现判断，刚写好测试完全没有问题，过了两天发现出现问题，判断不成了。后来发现所有alert出来的返回值前面都会加若干换行和空格。（至今不明白，同一台电脑，同样的环境，为什么...
ruoyi-postgresql设置自增序列.sql
09-10
ruoyi框架集成postgresql,对自增表设置序列
实战使用pano2vr生成html5全景页面
热门推荐
夜郎King的博客
03-06 6万+
随着现代视觉技术的进步以及对空间展示的迫切需求，很多的无人机可以拍出360度甚至720度全景照片，怎样将全景地图以html5的形式展示出来？文章将详细讲解如何使用pano2vr.exe制作全景页面。 1、准备pano2vr.exe 软件（以windows7说明） 2、准备一张全景图片 3、将图片导入到pano2vr中 使用说明：点击选择输入，将准备好的全景图片导入即可。 4、设置生成参数 1、如果拍摄的图片精度非常高，可以选择切片，展示效果会好一些。 2、旋转设置。可以设置页面
解决Cesium中Entity移动漂移的问题
夜郎King的博客
04-18 5万+
案例场景：在Cesium开发三维场景展示中，肯定会碰到加载Entity的需求，如果在你的gis应用中，带了地形的展示。那么在旋转切换画面时，Entity是否跟着一起动了起来，感觉像漂移一样呢？来看下面两张图，两个点在山脚漂到了山顶： 图1 漂移到山脚 ...
ruoyi echarts
08-24
Ruoyi Echarts是一种基于Ruoyi Framework和Echarts的图表库。通过引用Echarts中的函数和方法，可以在Ruoyi框架中快速创建和渲染各种图表。例如，可以使用echarts.registerMap()将GeoJson注册到Echarts中，以便在后续使用中方便地使用湖南地图。在初始化图表后，可以将具体的图表对象添加到数组中，并通过resize()函数来实现图表的自适应大小。在Tab切换时，可以通过调用resize()函数来重新渲染图表。通过合理拆分Echarts的报表，可以进一步发展和实现更多美好的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法](https://blog.csdn.net/yelangkingwuzuhu/article/details/131613002)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题](https://blog.csdn.net/yelangkingwuzuhu/article/details/131565407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 75
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜郎king

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值