場景

數據庫中每個數據都有開始時間以及結束時間兩個字段。

需要根據創建時間篩選出當天的四種類型的數據的平均執行時間。

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/> : {c} (ze8trgl8bvbq%)"},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/> : {c} (ze8trgl8bvbq%)"},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/> : {c} (ze8trgl8bvbq%)"},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/> : {c} (ze8trgl8bvbq%)"},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实现查询并显示平均时长占比饼状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。