1. 程式人生 > >使用laydate和echarts做資料統計

使用laydate和echarts做資料統計

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;
	}