场景
数据库中每个数据都有开始时间以及结束时间两个字段。
需要根据创建时间筛选出当天的四种类型的数据的平均执行时间。
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", //返回数据形式为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<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")
@ResponseBody
public 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的数据。具体代码逻辑参照上面两篇文章。
@Override
public 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));