销售统计饼状图

销售统计,画出饼状图(动态)

技术: Hightchart (前端)

思路:1.关联查询几张表获取数据  2.dao层将sql语句转成hql语句 3.service层   4Action 5.前端  注意配置文件

1.关联查询几张表获取数据

//操作的对象:(开始日期(创建订单的日期) orders),商品类型goodstype,销售额(sum()orderdetail); 找出关联的中间表是goods, 条件查询的是日期是orderdetail
//1.数据库实现查询
--1.关联4张表
select * from goodstype gt,goods g, orders o, orderdetail od where g.goodstypeuuid=gt.uuid
and o.uuid=od.ordersuuid and od.goodsuuid=g.uuid;
--2添加type=2,销售订单
select * from goodstype gt,goods g, orders o, orderdetail od where g.goodstypeuuid=gt.uuid
and o.uuid=od.ordersuuid and od.goodsuuid=g.uuid and type=2;
--按照商品类型分组,并且统计销售额
select gt.name , sum(od.money) from goodstype gt,goods g, orders o, orderdetail od where g.goodstypeuuid=gt.uuid
and o.uuid=od.ordersuuid and od.goodsuuid=g.uuid and type=2 group by gt.name;

2.dao层将sql语句转成hql语

 1 //2.创建IReporetDao和ReportDao
 2 @Override
 3     public List<Map<String,Object>> orderReport(Date startDate, Date endDate) {
 4         String hql = "select new Map(gt.name as name,sum(od.money) as y) From Goodstype gt, Orderdetail od, Orders o, Goods g "
 5                 + "where g.goodstype=gt and od.orders=o and od.goodsuuid=g.uuid "
 6                 + "and o.type=‘2‘ and od.state=‘1‘ ";
 7 //动态添加查询条件
 8         List<Date> queryParams = new ArrayList<Date>();
 9         if(null != startDate){
10             hql += "and o.createtime>=? ";
11             queryParams.add(startDate);
12         }
13         if(null != endDate){
14             hql += "and o.createtime<=? ";
15             queryParams.add(endDate);
16         }
17         hql += "group by gt.name";
18
19         return (List<Map<String,Object>>)this.getHibernateTemplate().find(hql,queryParams.toArray());
20     }
21 //2.1注意关联部分和原生 SQL 不同之处。from 后跟的是类名 （大写开头）
22 //2.2如果两个实体进行了一对多关联，关联的写法与 sql 不同
23 //2.3多的一方.一的一方属性 = 一的一方的别名
24 //2.4特别注意： 当我们的语句比较长，每换行后需要加空格
25 //3创建IreporetBiz 和ReportBiz 中orderReport方法.配置spring

3.service层

public List<Map<String, Object>> orderReport(Date startDate, Date endDate) {
		return reportDao.orderReport(startDate, endDate);
}
//4.创建orderAction中的orederReporet方法
/**
	 * 销售的报表
	 */
	public void orderReport(){
		List<Map<String, Object>> report = reportBiz.orderReport(startDate, endDate);
		write(JSON.toJSONString(report));
	}

4Action层

 1 public class ReportAction {
 2
 3     private Date startDate;
 4
 5     private Date endDate;
 6
 7     private IReportBiz reportBiz;
 8
 9     /**
10      * 销售统计报表
11      */
12     public void orderReport(){
13         List reportData = reportBiz.orderReport(startDate, endDate);
14         write(JSON.toJSONString(reportData));
15     }
16
17     public Date getStartDate() {
18         return startDate;
19     }
20
21     public void setStartDate(Date startDate) {
22         this.startDate = startDate;
23     }
24
25     public Date getEndDate() {
26         return endDate;
27     }
28
29     public void setEndDate(Date endDate) {
30         this.endDate = endDate;
31     }
32
33     public void setReportBiz(IReportBiz reportBiz) {
34         this.reportBiz = reportBiz;
35     }
36
37     /**
38      * 输出给前端
39      * @param mapString
40      */
41     public void write(String mapString) {
42         //返回对象
43         HttpServletResponse res = ServletActionContext.getResponse();
44         res.setContentType("text/html;charset=utf-8");
45         res.setCharacterEncoding("utf-8");
46
47         try {
48             //输出给页面
49             res.getWriter().write(mapString);
50         } catch (IOException e) {
51             // TODO Auto-generated catch block
52             e.printStackTrace();
53         }
54     }
55 }

5.配置struts和spring(略)

6.js编写(copy源码)

//6.1js 饼状图
$(function(){
	//加载表格数据
	$(‘#grid‘).datagrid({
		url:‘report_orderReport‘,
		columns:[[
		  		{field:‘name‘,title:‘商品类型‘,width:100},
	  		    {field:‘y‘,title:‘销售额‘,width:100}
		]],
		singleSelect: true,
		onLoadSuccess:function(data){
			showChart(data.rows);
		}
	});
	//点击查询按钮
	$(‘#btnSearch‘).bind(‘click‘,function(){
		//把表单数据转换成json对象
		var formData = $(‘#searchForm‘).serializeJSON();
		$(‘#grid‘).datagrid(‘load‘,formData);
	});

});
function showChart(data){
	$(‘#pieChart‘).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: ‘pie‘
        },
        title: {
            text: ‘销售统计‘
        },
        tooltip: {
            pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: ‘pointer‘,
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        },
        series: [{
            name: "比例",
            colorByPoint: true,
            data: data
        }],
        credits:{
        	text:‘www.itheima.com‘
        }
    });
}

7.html页面

 1 <body class="easyui-layout">
 2 <div data-options="region:‘center‘,title:‘销售统计表‘" style="padding:4px;background-color:#eee">
 3         <form id="searchForm">
 4             开始日期:<input name="startDate" class="easyui-datebox">
 5             结束日期:<input name="endDate" class="easyui-datebox">
 6             <button type="button" id="btnSearch">查询</button>
 7         </form>
 8     <div style="height:4px;"></div>
 9     <table id="grid"></table>
10 </div>
11 <div data-options="region:‘east‘,title:‘销售统计图‘,split:true" style="width:600px;">
12     <div id="pieChart"></div>
13 </div>
14 </div>