图形报表 highcharts 按日统计 小栗子

一、引入资源文件
在这里插入图片描述
资源链接:
链接:链接:https://pan.baidu.com/s/1cqK50dVZ8m2euqmeXq5p0A&shfl=sharepset
提取码:nhhx

2、页面

<title>按日统计分析</title>
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/static/highcharts4/js/highcharts.js"></script>
<script type="text/javascript" src="/static/js/date.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		$("#s_begin").datebox("setValue",genLastWeekDayStr()); // 设置上个月日期
		$("#s_end").datebox("setValue",genTodayStr()); // 设置当前日期
		
		
	});

	function search(){
		var chart=new Highcharts.Chart({
			chart:{           // chart属性  一个总体的定义       
				renderTo:"container",  //渲染到哪里
				type:'column',   //柱状图
				events:{    //根据load事件加载数据
					load:function(event){
						var begin=$("#s_begin").datebox("getValue");
						var end=$("#s_end").datebox("getValue");
						$.post("/admin/saleList/countSaleByDay",{begin:begin,end:end},function(result){
							var rows=result.rows;
							var xArr=new Array();
							var yArr=new Array();
							for(var i=0;i<rows.length;i++){
								xArr.push(rows[i].date);
								yArr.push(rows[i].amountProfit);
							}
							chart.xAxis[0].categories=xArr;
							chart.series[0].setData(yArr);
						},"json");
					}
				}
			},
			title:{
				text:'按日统计分析'
			}, 
				//这些个默认数据必须写上 否则报错
			xAxis:{
				title:'日期',
				categories:[
				    'A',
				    'B',
				    'C'
				]
			},
			yAxis:{
				title:{
					text:'销售利润'
				}
			},
			// 默认显示的数据  是个数组对象 二维的  
			series:[{
				name:'销售利润',
				data:[1,2,3]
			}]
		});
	}
	
</script>
<body>
	<div style="height: 100px;padding: 10px;border: 0px;">
		<fieldset style="border-color: #E7F0FF">
			<legend>统计设置</legend>
			&nbsp;&nbsp;&nbsp;统计时间:&nbsp;
			<input id="s_begin" class="easyui-datebox" editable=false style="width:100px"/>
			&nbsp;&nbsp;-&nbsp;&nbsp;
			<input id="s_end" class="easyui-datebox" editable=false style="width:100px"/>
			&nbsp;&nbsp;<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
		</fieldset>
	</div>
	
	<div style="padding-left: 10px;padding-right: 10px;border: 0px;height: 350px">
		<div id="container"></div>
	</div>
</body>
</html>

3、Controller

/**
	 * 按日统计分析
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/countSaleByDay")
	@RequiresPermissions(value="按日统计分析")
	public Map<String,Object> countSaleByDay(String begin, String end)throws Exception{
		Map<String,Object> resultMap=new HashMap<>();
		List<SaleCount> scList=new ArrayList<>();

		//获取指定范围内的日期集合
		List<String> dates=DateUtil.getRangeDates(begin, end);
		//按天统计某个日期范围内的销售信息
		List<Object> ll=saleListService.countSaleByDay(begin, end);

		for(String date:dates){
			SaleCount sc=new SaleCount();
			sc.setDate(date);
			boolean flag=false;  //默认某一天的 数据为0
			for(Object o:ll){
				Object []oo=(Object[]) o;
				String dd=oo[2].toString().substring(0,10);//截取日期
				if(dd.equals(date)){ // 存在
					sc.setAmountCost(MathUtil.format2Bit(Float.parseFloat(oo[0].toString()))); // 成本总金额
					sc.setAmountSale(MathUtil.format2Bit(Float.parseFloat(oo[1].toString()))); // 销售总金额
					sc.setAmountProfit(MathUtil.format2Bit(sc.getAmountSale()-sc.getAmountCost())); // 销售利润
					flag=true;
				}
			}
			if(!flag){  //默认某一天的 数据为0
				sc.setAmountCost(0);
				sc.setAmountSale(0);
				sc.setAmountProfit(0);
			}
			scList.add(sc);
		}
		resultMap.put("rows", scList);
		resultMap.put("success", true);
		return resultMap;
	}

4、Repository

/**
	 * 按天统计某个日期范围内的销售信息
	 * @param begin
	 * @param end
	 * @return
	 */
	@Query(value="SELECT SUM(t3.purchasing_price*t1.num) AS amountCost,SUM(t1.price*t1.num) AS amountSale,t2.`sale_date` AS saleDate FROM  t_sale_list_goods t1 LEFT JOIN t_sale_list t2 ON t1.`sale_list_id`=t2.`id` LEFT JOIN t_goods t3 ON t3.`id`=t1.`goods_id` WHERE t2.`sale_date` BETWEEN ?1 AND ?2 GROUP BY t2.`sale_date`",nativeQuery=true)
	public List<Object> countSaleByDay(String begin,String end);
	

在这里插入图片描述
5、效果截图
在这里插入图片描述

发布了98 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_37767455/article/details/102635764