销售统计饼状图

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

技术: 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语

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

public class ReportAction {

    private Date startDate;

    private Date endDate;

    private IReportBiz reportBiz;

    /**
     * 销售统计报表
     */
    public void orderReport(){
        List reportData = reportBiz.orderReport(startDate, endDate);
        write(JSON.toJSONString(reportData));
    }

    public Date getStartDate() {
        return startDate;
    }

    public void setStartDate(Date startDate) {
        this.startDate = startDate;
    }

    public Date getEndDate() {
        return endDate;
    }

    public void setEndDate(Date endDate) {
        this.endDate = endDate;
    }

    public void setReportBiz(IReportBiz reportBiz) {
        this.reportBiz = reportBiz;
    }
    
    /**
     * 输出给前端
     * @param mapString
     */
    public void write(String mapString) {
        //返回对象
        HttpServletResponse res = ServletActionContext.getResponse();
        res.setContentType("text/html;charset=utf-8");
        res.setCharacterEncoding("utf-8");

        try {
            //输出给页面
            res.getWriter().write(mapString);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

5.配置struts和spring(略)

6.js编写(copy源码)

//6.1js 饼状图
$(function(){
	//加载表格数据
	$('#grid').datagrid({
		url:'report_orderReport',
		columns:[[
		  		{field:'name',title:'商品类型',100},
	  		    {field:'y',title:'销售额',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页面

<body class="easyui-layout">
<div data-options="region:'center',title:'销售统计表'" style="padding:4px;background-color:#eee">
        <form id="searchForm">
            开始日期:<input name="startDate" class="easyui-datebox">
            结束日期:<input name="endDate" class="easyui-datebox">
            <button type="button" id="btnSearch">查询</button>
        </form>
    <div style="height:4px;"></div>
    <table id="grid"></table>
</div>
<div data-options="region:'east',title:'销售统计图',split:true" style="600px;">
    <div id="pieChart"></div>
</div>
</div>