使用laydate和echarts做数据统计

刺骨的言语ヽ痛彻心扉 2022-06-02 04:42 157阅读 0赞

1.页面

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>摘星</title>
    <meta name="keywords"  content="设置关键词..." />
    <meta name="description" content="设置描述..." />
    <meta name="author" content="DeathGhost" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <link rel="icon" href="static/base/images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../static/base/javascript/plug-ins/layerUi/mobile/need/layer.css" />
    <link rel="stylesheet" type="text/css" href="../static/base/css/style.css" />
    <style>  
    	.line{
    		height:1px;margin:0px auto;padding:0px;background-color:black;overflow:hidden;
    	}
    	.kuangkuang{
    		width: 22%;
    		height: 159px;
    		border-style: solid;
    		border-width: 1px;
    		float: left;
    		border-color:rgb(201,201,201);
    	}
    	.kuangkuang-up{
    		line-height:96px;
    		text-align: center;
    		font-size: 32px;
    		position: relative;
    	}
    	.kuangkuang-down{
     		text-align: center; 
    		line-height: 65px;
    		font-size: 20px;
    		background-color: rgb(233, 233, 233);
    	}
    </style>
    </head>
    <body style="width: 100%;height: 120%">
    	<br>
    	<div class="page-container">  
             <div style="height:159px;text-align:center;">
    			<div class="kuangkuang" style="margin-left:2%;">
    				<div class="kuangkuang-down">入库单</div>
    				<div class="kuangkuang-up" id="rkd">
    					0单
    				</div>
    			</div>
    			
    			<div class="kuangkuang" style="margin-left:2%;">
    				<div class="kuangkuang-down">出库单</div>
    				<div class="kuangkuang-up" id="ckd">
    					0单
    				</div>
    			</div>
    			<div class="kuangkuang" style="margin-left:2%;">
    				<div class="kuangkuang-down">总收入</div>
    				<div class="kuangkuang-up" id="shouru">
    					0￥
    				</div>
    			</div>
    			<div class="kuangkuang" style="margin-left:2%;">
    				<div class="kuangkuang-down">总支出</div>
    				<div class="kuangkuang-up" id="zhichu">
    					0￥
    				</div>
    			</div>
    		</div>
    		<br>
    		<br>
    	    <input type="text" id="stime" placeholder="选择时间" class="form-control" style="width:140px;float: right;margin-right: 4%;">
    	    <span style="float: right;margin-right:1%;margin-top:5px;">选择时间:</span>
    		<br>
    		<br>
    	    <div id="main1" style="width:45%;height:450px;float:left;"></div>
    	    <div id="main2" style="width:45%;height:480px;float:left;"></div>
       </div>  
    	
    	
    <script src="../static/base/javascript/jquery.js"></script>
    <script src="../static/base/javascript/plug-ins/layerUi/layer.js"></script>
    <script src="../static/laydate/laydate.js"></script>
    <script src="../static/echarts/echarts.min.js"></script>
    <script src="../static/js/tools.js"></script>
    <script type="text/javascript">
    
    //日期范围
    laydate.render({
        elem: '#stime',
        type: 'datetime',
        range: true,
        done: function(value, date, endDate){
    	    console.log(value); //得到日期生成的值，如：2017-08-18
    	    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    	    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
    	    changedata(date,endDate,2);
        }
    });
    
    //给layDate一个默认值
    $(document).ready(function () {
    	var now1 = new Date();
    	now1.setDate(now1.getDate()-7);
    	now1.setHours(0);
    	now1.setMinutes(0);
    	now1.setSeconds(0);
    	now1.setMilliseconds(0);
    	var now2 = new Date();
    	now2.setHours(23);
    	now2.setMinutes(59);
    	now2.setSeconds(59);
    	var time1 = formatTime(now1,"yyyy-MM-dd hh:mm:ss");
    	var time2 = formatTime(now2,"yyyy-MM-dd hh:mm:ss");
        $("#stime").val(time1 +' - '+ time2);
        changedata(now1,now2,1);
    });
    
    function changedata(date,endDate,type){
    	if(type == 1){
    		date = formatTime(date, "yyyy-MM-dd hh:mm:ss")
    		endDate = formatTime(endDate, "yyyy-MM-dd hh:mm:ss")
    	}else{
    		date=date.year+'-'+date.month+'-'+date.date+' '+date.hours+':'+date.minutes+':'+date.seconds
    		endDate=endDate.year+'-'+endDate.month+'-'+endDate.date+' '+endDate.hours+':'+endDate.minutes+':'+endDate.seconds
    	}
    	$.ajax({
    	   type: "POST",
    	   url: serverWeb+"home/getKuNameAndCount",
    	   data: {
    			date:date,
    			endDate:endDate
    	   },
    	   success: function(data){
    		   data = JSON.parse(data);
    		   console.log(data);
    		   if(data.status){
    			   $("#rkd").html(data.record.rcount + "单")
    			   $("#ckd").html(data.record.ccount + "单")
    			   $("#shouru").html(data.record.shouru + "￥")
    			   $("#zhichu").html(data.record.zhichu + "￥")
    			   myChart1.setOption({  
                       xAxis: {  
                           data: data.record.xAxis1  
                       },  
                       series: [{
    	        	        data: data.record.data1
    	        	   },{
    	        	        data: data.record.data2
    	        	   }]  
    	           });
    	           //这里设置图片自适应
    			   window.addEventListener("resize",function(){
    				    myChart1.resize();
    				});
    			   myChart2.setOption({  
                       xAxis: {  
                           data: data.record.xAxis2  
                       },  
                       series: [{
    	        	        data: data.record.data3
    	        	   },{
    	        	        data: data.record.data4
    	        	   }]  
    	           });
    	           //这里设置图片自适应
    			   window.addEventListener("resize",function(){
    				    myChart2.resize();
    				});
    			   
    		   }
    	   }
    	});
    }
    
    /*---------------------------------树状图------------------------------*/
    	
    	//基于准备好的dom，初始化echarts实例
    	var myChart1 = echarts.init(document.getElementById('main1'));
    	
    	// 指定图表的配置项和数据
    	var option1 = {
    	    title: {
    	        text: '出入库数量'
    	    },
    	    tooltip: {},
    	    legend: {
    	    	bottom:'-1%',
    	        data:['入库量', '出库量']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '9%',
    	        containLabel: true
    	    },
    	    xAxis: {
    	        data: ["java基础","C++编程","高等数学","统计学原理","网络原理","三剑客教程"]
    	    },
    	    yAxis: {},
    	    series: [{
    	        name: '入库量',
    	        type: 'bar',
    	        data: [5, 20, 36, 10, 10, 20]
    	    },{
    	        name: '出库量',
    	        type: 'bar',
    	        data: [8, 15, 52, 16, 17, 22]
    	    }]
    	};
    	
    	// 使用刚指定的配置项和数据显示图表。
    	myChart1.setOption(option1);
    	
    /*---------------------------------折线图--------------------------------*/
    
    var myChart2 = echarts.init(document.getElementById('main2'));
    
    
    option2 = {
    	    title: {
    	        text: '支出/收入'
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	    	bottom:'4%',
    	        data:['收入','支出']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '9%',
    	        containLabel: true
    	    },
    	    toolbox: {
    	        feature: {
    	            saveAsImage: {}
    	        }
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: [
    	               '2018/1/1', '2018/1/2', '2018/1/3',
    	               '2018/1/4', '2018/1/2', '2018/1/3', '2018/1/4'
    	              ],
                axisLabel: {
                    rotate: 45
                }
    		},
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'收入',
    	            type:'line',
    	            data:[0, 0, 0, 0, 0, 0, 0]
    	        },{
    	            name:'支出',
    	            type:'line',
    	            data:[0, 0, 0, 0, 0, 0, 0]
    	        }
    	    ]
    	};
    
    	myChart2.setOption(option2);
    
    /*---------------------------------------------------------------*/
    
    
    
    </script>
    </body>
    </html>

2.controller层

package com.project.controller;
    
    
    import java.util.Date;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.lang3.StringUtils;
    import org.apache.log4j.Logger;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.project.service.ICangkuService;
    import com.project.service.IRecordService;
    import com.project.utils.DateUtil;
    import com.project.utils.JSONFZ;
    
    /**
     *  前端控制器
     */
    @Controller
    @RequestMapping("/home")
    public class HomeController extends BaseController{
    	
    	private Logger logger= Logger.getLogger(HomeController.class);
    	
    	@Autowired
    	private ICangkuService cangkuService;
    	
    	@Autowired
    	private IRecordService recordService;
    	
    	//得到出入库产品名称和数量
    	@RequestMapping("/getKuNameAndCount")
    	@ResponseBody
    	public String getKuNameAndCount(HttpServletRequest request, HttpServletResponse response) {
    		logger.info("get参数 : " + JSON.toJSONString(request.getParameterMap()));
    		String dates = request.getParameter("date");
    		String endDates = request.getParameter("endDate");
    		Date startDate = null;
    		Date endDate = null;
    		if(StringUtils.isNotBlank(dates)){
    			startDate = DateUtil.parseDate(dates);
    		}
    		if(StringUtils.isNotBlank(endDates)){
    			endDate = DateUtil.parseDate(endDates);
    		}
    		try {
    			JSONObject jsonobject = cangkuService.getKuNameAndCount(startDate, endDate);
    			return new JSONFZ().put("status", true).put("record", jsonobject).toJSONString();
    		} catch (Exception e) {
    			e.printStackTrace();
    			return new JSONFZ().put("status", false).toJSONString();
    		}
    	}
    
    	 
    }

3.service层

public JSONObject getKuNameAndCount(Date startDate, Date endDate) {
    		JSONObject jsonobject = new JSONObject();
    		//1.查询入库单，出库单，收入和支出
    		EntityWrapper<Record> rWrapper = new EntityWrapper<Record>();
    		rWrapper.between("createTime", startDate, endDate);
    		List<Record> rList = recordMapper.selectList(rWrapper);
    		int rcount = 0,ccount = 0;
    		BigDecimal shouru = new BigDecimal(0);
    		BigDecimal zhichu = new BigDecimal(0);
    		Calendar cal1 = Calendar.getInstance();
    		for (Record record : rList) {
    			if(record.getType() == 4){
    				//出库
    				ccount++;
    				shouru =record.getTotalpriced().add(shouru);
    			}else{
    				//入库
    				rcount++;
    				zhichu =record.getTotalpriced().add(zhichu);
    			}
    			//将createTime的时分秒去掉
    			cal1.setTime(record.getCreateTime());
    			// 将时分秒,毫秒域清零
    			cal1.set(Calendar.HOUR_OF_DAY, 0);
    			cal1.set(Calendar.MINUTE, 0);
    			cal1.set(Calendar.SECOND, 0);
    			cal1.set(Calendar.MILLISECOND, 0);
    			record.setCreateTime(cal1.getTime());
    		}
    		jsonobject.put("rcount", rcount);
    		jsonobject.put("ccount", ccount);
    		jsonobject.put("zhichu", zhichu);
    		jsonobject.put("shouru", shouru);
    		//2.折线图数据，精确到天
    		/*List<String> zxname = rList.stream()
    				.map(s -> DateUtil.format(s.getCreateTime())).distinct()
    				.sorted()
    				.collect(Collectors.toList());*/
    		List<String> zxname = Lists.newArrayList();
    		cal1.setTime(startDate);
    		boolean bContinue = true; 
    		while(bContinue){
    			 cal1.add(Calendar.DAY_OF_MONTH, 1);
    			 if (endDate.after(cal1.getTime())) { 
    				 zxname.add(DateUtil.format(cal1.getTime()));
    			 }else{
    				 bContinue = false;
    			 }
    		}
    		
    		List<BigDecimal> total1 = Lists.newArrayList();
    		List<BigDecimal> total2 = Lists.newArrayList();
    		for (String name : zxname) {
    			BigDecimal shourun = new BigDecimal(0);
    			BigDecimal zhichun = new BigDecimal(0);
    			for (Record record : rList) {
    				if(StringUtils.equals(name, DateUtil.format(record.getCreateTime()))){
    					if(record.getType() == 4){
    						//出库，即收入
    						shourun = shourun.add(record.getTotalpriced());
    					}else{
    						//入库，即支出
    						zhichun = zhichun.add(record.getTotalpriced());
    					}
    				}
    			}
    			total1.add(shourun);
    			total2.add(zhichun);
    			//去掉后面的时分秒
    			name = name.substring(0,name.indexOf(" "));
    		}
    		List<String> xAxis2 = zxname.stream()
    				.map(s -> s.substring(0, s.indexOf(" ")))
    				.collect(Collectors.toList());
    		jsonobject.put("xAxis2", xAxis2);
    		jsonobject.put("data3", total1);
    		jsonobject.put("data4", total2);
    		//3.查找出所有在当前时间范围内的产品名称（包括出库和入库）
    		EntityWrapper<RecordProduct> rpWrapper = new EntityWrapper<RecordProduct>();
    		rpWrapper.between("createTime", startDate, endDate);
    		List<RecordProduct> rpList = recordProductService.selectList(rpWrapper);
    		List<String> pName = rpList.stream()
    				.map(s-> s.getProductName()).distinct()
    				.collect(Collectors.toList());
    		//3.根据type（出库/入库）分组
    		Map<Integer, List<RecordProduct>> rpMap = rpList.stream().collect(    
                    Collectors.groupingBy(RecordProduct::getType));  
    		
    		List<RecordProduct> ckRPList = rpMap.get(1);
    		List<RecordProduct> rkRPList = rpMap.get(2);
    		jsonobject.put("xAxis1", pName);
    		List<Long> value1 = Lists.newArrayList();
    		List<Long> value2 = Lists.newArrayList();
    		for (String rpName : pName) {
    			Long sum1 = ckRPList.stream()
    					.filter(s -> StringUtils.equals(rpName, s.getProductName()))
    					.mapToLong(RecordProduct :: getCount).sum();
    			value1.add(sum1);
    			
    			Long sum2 = rkRPList.stream()
    					.filter(s -> StringUtils.equals(rpName, s.getProductName()))
    					.mapToLong(RecordProduct :: getCount).sum();
    			value2.add(sum2);
    		}
    		Long[] v1 = (Long[])value1.toArray(new Long[value1.size()]);
    		Long[] v2 = (Long[])value2.toArray(new Long[value2.size()]);
    		jsonobject.put("data1", v1);
    		jsonobject.put("data2", v2);
    		return jsonobject;
    	}

![20180103191118156][]

[20180103191118156]: /images/20220602/7849de2f1b014ed5b77fe0c509a0c51a.png