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

场景

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

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

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

效果

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

实现

参照上面两篇在成功引入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",        //返回数据形式为json
        success : 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{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} 
{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}
{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}
{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")
    @ResponseBody
    public Map> echartsShow(@RequestBody Map 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> map = new HashMap<>();
        map=logisticsOrderService.echartsShow(createTime);
        return map;
    }

具体Service实现

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

@Override
    public Map> echartsShow(String createTime) {
        Map> map = new HashMap<>();
        //查询物料运输件数数据
        List list1 = new ArrayList();
        //查询物料运输件数
        //查询正极运输件数
        QueryWrapper BusLogisticsOrderQueryWrapper =new QueryWrapper();
        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 BusLogisticsOrderQueryWrapper1 =new QueryWrapper();
        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 BusLogisticsOrderQueryWrapper2 =new QueryWrapper();
        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 BusLogisticsOrderQueryWrapper3 =new QueryWrapper();
        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 list2 = new ArrayList();
        //正极
        QueryWrapper BusLogisticsOrderQueryWrapper4 =new QueryWrapper();
        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 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 BusLogisticsOrderQueryWrapper5 =new QueryWrapper();
        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 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 BusLogisticsOrderQueryWrapper6 =new QueryWrapper();
        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 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 BusLogisticsOrderQueryWrapper7 =new QueryWrapper();
        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 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 list3 = new ArrayList();
        list3.add(new Echarts("正极车间",100));
        list3.add(new Echarts("负极车间",200));
        list3.add(new Echarts("立体仓库",300));
        list3.add(new Echarts("清洁车间",400));
        List list4 = new ArrayList();
        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 list2 = new ArrayList();
        //正极
        QueryWrapper BusLogisticsOrderQueryWrapper4 =new QueryWrapper();
        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 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,平均时长饼状图)