场景

数据库中每个数据都有开始时间以及结束时间两个字段。

需要根据创建时间筛选出当天的四种类型的数据的平均执行时间。

SpringBoot+Echarts实现请求后台数据显示饼状图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89921101

SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90021553

效果

实现

参照上面两篇在成功引入Echarts以及能异步请求后台数据的基础上。

修改js文件添加ajax请求传递时间请求参数

下面代码请求四个Echarts的数据，这里只参照第二个Echarts数据获取。

var createTime = $("#createTime").val();// 基于准备好的dom，初始化echarts实例var myChart1 = echarts.init(document.getElementById('main1'));var myChart2 = echarts.init(document.getElementById('main2'));var myChart3 = echarts.init(document.getElementById('main3'));var myChart4 = echarts.init(document.getElementById('main4'));// 指定图表的配置项和数据var names1=[];var values1=[];var names2=[];var values2=[];var names3=[];var values3=[];var names4=[];var values4=[];//数据加载完之前先显示一段简单的loading动画myChart1.showLoading();myChart2.showLoading();myChart3.showLoading();myChart4.showLoading();$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处data:JSON.stringify({"createTime":""+createTime+""}),contentType: "application/json",dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {var list1 = result["list1"]var list2 = result["list2"]var list3 = result["list3"]var list4 = result["list4"]for(var i=0;i<list1.length;i++){names1.push(list1[i].name);values1.push(list1[i].num);}for(var i=0;i<list2.length;i++){names2.push(list2[i].name);values2.push(list2[i].num);}for(var i=0;i<list3.length;i++){names3.push(list3[i].name);values3.push(list3[i].num);}for(var i=0;i<list4.length;i++){names4.push(list4[i].name);values4.push(list4[i].num);}myChart1.hideLoading();    //隐藏加载动画myChart1.setOption({title: {text: '物料数量(件)',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: names1},series: [{name: '物料数量(件)',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list1,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart2.hideLoading();    //隐藏加载动画myChart2.setOption({title: {text: '物流单平均时长(秒)',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: names2},series: [{name: '物流单平均时长(秒)',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list2,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart3.hideLoading();    //隐藏加载动画myChart3.setOption({title: {text: '物流队列数(单)',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: names3},series: [{name: '物流队列数(单)',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list3,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart4.hideLoading();    //隐藏加载动画myChart4.setOption({title: {text: '等待平均时长(秒)',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: names4},series: [{name: '等待平均时长(秒)',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list4,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});//end ajax

后台Conrtroller获取数据

 @Description("获取Echarts数据")@RequestMapping("/EcharsShow")@ResponseBodypublic Map<String,List<Echarts>> echartsShow(@RequestBody Map<String, String> params) {String createTime = params.get("createTime");SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");< BR>       if(createTime==""||createTime==null){createTime= simpleDateFormat.format(new Date()).toString();}Map<String,List<Echarts>> map = new HashMap<>();map=logisticsOrderService.echartsShow(createTime);return map;}

具体Service实现

先附上完整代码，这里是获取四个Echarts的数据。具体代码逻辑参照上面两篇文章。

@Overridepublic Map<String, List<Echarts>> echartsShow(String createTime) {Map<String,List<Echarts>> map = new HashMap<>();//查询物料运输件数数据List<Echarts> list1 = new ArrayList<Echarts>();//查询物料运输件数//查询正极运输件数QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_ZHENGJI);BusLogisticsOrderQueryWrapper.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountZhengji = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper);list1.add(new Echarts("正极车间",sumCountZhengji));//查询负极运输件数QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper1 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper1.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper1.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper1.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_FUJI);BusLogisticsOrderQueryWrapper1.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountFuji = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper1);list1.add(new Echarts("负极车间",sumCountFuji));//查询立体仓库QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper2 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper2.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper2.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper2.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_YUANLIAO);BusLogisticsOrderQueryWrapper2.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountYuanLiao = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper2);list1.add(new Echarts("立体仓库",sumCountYuanLiao));//清洁车间QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper3 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper3.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper3.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper3.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_QINGJIE);BusLogisticsOrderQueryWrapper3.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountQingjie = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper3);list1.add(new Echarts("清洁车间",sumCountQingjie));map.put("list1",list1);//查询物流单执行时长List<Echarts> list2 = new ArrayList<Echarts>();//正极QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper4 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper4.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper4.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper4.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_ZHENGJI);BusLogisticsOrderQueryWrapper4.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");List<BusLogisticsOrder> busLogisticsOrderList = busLogisticsOrderMapper.selectList(BusLogisticsOrderQueryWrapper4);Long betweenTime=0l;Integer averageBetweenTime = 0;< BR>       if(busLogisticsOrderList!=null&busLogisticsOrderList.size()!=0){for (BusLogisticsOrder b:busLogisticsOrderList) {betweenTime +=((b.getFinishTime().getTime()-b.getStartTime().getTime())/1000);}averageBetweenTime=(int)(betweenTime/busLogisticsOrderList.size());}list2.add(new Echarts("正极车间",averageBetweenTime));//负极QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper5 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper5.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper5.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper5.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_FUJI);BusLogisticsOrderQueryWrapper5.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");List<BusLogisticsOrder> busLogisticsOrderList1 = busLogisticsOrderMapper.selectList(BusLogisticsOrderQueryWrapper5);Long betweenTime1=0l;Integer averageBetweenTime1 = 0;< BR>       if(busLogisticsOrderList1!=null&busLogisticsOrderList1.size()!=0){for (BusLogisticsOrder b:busLogisticsOrderList1) {betweenTime1 +=((b.getFinishTime().getTime()-b.getStartTime().getTime())/1000);}averageBetweenTime1=(int)(betweenTime1/busLogisticsOrderList1.size());}list2.add(new Echarts("负极车间",averageBetweenTime1));//立库QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper6 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper6.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper6.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper6.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_YUANLIAO);BusLogisticsOrderQueryWrapper6.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");List<BusLogisticsOrder> busLogisticsOrderList2 = busLogisticsOrderMapper.selectList(BusLogisticsOrderQueryWrapper6);Long betweenTime2=0l;Integer averageBetweenTime2 = 0;< BR>       if(busLogisticsOrderList2!=null&busLogisticsOrderList2.size()!=0){for (BusLogisticsOrder b:busLogisticsOrderList2) {betweenTime2 +=((b.getFinishTime().getTime()-b.getStartTime().getTime())/1000);}averageBetweenTime2=(int)(betweenTime2/busLogisticsOrderList2.size());}list2.add(new Echarts("立体仓库",averageBetweenTime2));//清洁QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper7 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper7.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper7.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper7.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_YUANLIAO);BusLogisticsOrderQueryWrapper7.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");List<BusLogisticsOrder> busLogisticsOrderList3 = busLogisticsOrderMapper.selectList(BusLogisticsOrderQueryWrapper7);Long betweenTime3=0l;Integer averageBetweenTime3 = 0;< BR>       if(busLogisticsOrderList3!=null&busLogisticsOrderList3.size()!=0){for (BusLogisticsOrder b:busLogisticsOrderList3) {betweenTime3 +=((b.getFinishTime().getTime()-b.getStartTime().getTime())/1000);}averageBetweenTime3=(int)(betweenTime3/busLogisticsOrderList3.size());}list2.add(new Echarts("清洁车间",averageBetweenTime3));map.put("list2",list2);List<Echarts> list3 = new ArrayList<Echarts>();list3.add(new Echarts("正极车间",100));list3.add(new Echarts("负极车间",200));list3.add(new Echarts("立体仓库",300));list3.add(new Echarts("清洁车间",400));List<Echarts> list4 = new ArrayList<Echarts>();list4.add(new Echarts("正极车间",100));list4.add(new Echarts("负极车间",200));list4.add(new Echarts("立体仓库",300));list4.add(new Echarts("清洁车间",400));map.put("list3",list3);map.put("list4",list4);return map;}

重点获取平均时长数据

//查询物流单执行时长List<Echarts> list2 = new ArrayList<Echarts>();//正极QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper4 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper4.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper4.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper4.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_ZHENGJI);BusLogisticsOrderQueryWrapper4.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");List<BusLogisticsOrder> busLogisticsOrderList = busLogisticsOrderMapper.selectList(BusLogisticsOrderQueryWrapper4);Long betweenTime=0l;Integer averageBetweenTime = 0;if(busLogisticsOrderList!=null&busLogisticsOrderList.size()!=0){for (BusLogisticsOrder b:busLogisticsOrderList) {betweenTime +=((b.getFinishTime().getTime()-b.getStartTime().getTime())/1000);}averageBetweenTime=(int)(betweenTime/busLogisticsOrderList.size());}list2.add(new Echarts("正极车间",averageBetweenTime));

SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图相关推荐

如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图
一.前言上篇文章我们用POI技术读取Excel并生成了相应的图表.但是实际的效果比较一般,因为本身WPS生成图表就比较简单,如果用程序操作远比人工耗时费力,效果远不如一些付费模板.如下图所示: 然后 ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
前言: "宁肯像种子一样等待也不愿像疲惫的陀螺旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
场景 SpringBoot+Echarts实现请求后台数据显示饼状图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/899211 ...
一篇读懂springboot用echarts实现实时柱状图和饼状图查询
1.业务说明将数据库中的数据分别以柱状图和饼状图呈现出来 gitee项目路径:https://gitee.com/ziac/ls.git 2.1 柱状图需要引入的js 建议去echarts官网直接用 ...
SpringBoot、EasyPoi、Echarts 实现文档导入、出、图表显示 (饼状图、柱状图) 保姆级教程
一.介绍环境 EasyPOI: 现在我们就来介绍下EasyPoi,首先感谢EasyPoi 的开发者.EasyPoi开源 easypoi 是为了让开发者快速的实现excel,word,pdf的导入导出 ...
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...
Springboot+poi+thymeleaf 做导入导出用echarts.js做饼状图和树形图
创建一个SpringBoot项目项目架构 pom文件和yml配置 server:port: 8081spring:datasource:driver-class-name: com.mysql.cj ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...

SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图

场景

效果

实现

修改js文件添加ajax请求传递时间请求参数

后台Conrtroller获取数据

具体Service实现

重点获取平均时长数据

SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图相关推荐

最新文章

热门文章