销售趋势分析折线图

销售趋势分析曲线图

1.思路 :dao -service -web -前端

2.技术:HighCharts

1.dao

//1.dao层查询出按照年的各个月份的销售额(关联的字段是:
//month(orders),sum(ordedetail))
//并且将数据获取的给设置成map集合
public List<Map<String, Object>> getSumMoney(int year) {
		String hql = "select new Map(month(o.createtime) as month, sum(od.money) as y) "
				+ "from Orderdetail od, Orders o "
				+ "where od.orders = o "
				+ "and o.type=‘2‘ and od.state=‘1‘ "
				+ "and year(o.createtime)=? "
				+ "group by month(o.createtime)";

		return (List<Map<String, Object>>) this.getHibernateTemplate().find(hql, year);
	}

2.service

//2.service层对数据进行处理
@Override
    public List<Map<String, Object>> trendReport(int year) {
        //result 部分月份的数据： 有些月份是没有数据，没有数据的月份是不会在result里面
        List<Map<String,Object>> result = reportDao.getSumMoney(year);
        //[{"month":6,"y":1045.4}]
        //把存在的数据转成map<Integer,Double>, key=月份, value=数值
        //定义一个map来接收转换后数据
        Map<Integer,Object> existsMonthDataMap = new HashMap<Integer, Object>();
        for(Map<String,Object> existMap : result){
            //exitsMap=> {"month":6,"y":1045.4}
            existsMonthDataMap.put((Integer)existMap.get("month"), existMap.get("y"));
        }
        //existsMonthDataMap => {"6":"1045.4"}, {"7":"9527"}
        //[{"month":6,"y":1045.4}]
        List<Map<String, Object>> returnList = new ArrayList<Map<String, Object>>();

        //********  补月份的数据     ****************
        for(int i = 1; i<=12; i++){
            Map<String,Object> data = new HashMap<String,Object>();
            //如果存在月份的数据
            if(null != existsMonthDataMap.get(i)){
                data.put("month", i);
                data.put("y", existsMonthDataMap.get(i));
            }else{
                data.put("month", i);
                data.put("y", 0);
            }
            //把每个月份的数据加到list中
            returnList.add(data);
        }

        return returnList;
    }

3.web层

//3.action写回到前端
/**
	 * 销售趋势
	 */
	public void trendReport(){
		List<Map<String, Object>> report = reportBiz.trendReport(year);
		write(JSON.toJSONString(report));
	}

4.1前端 report_trend.js

$(function(){
    //加载表格数据
    $(‘#grid‘).datagrid({
        url:‘report_trendReport‘,
        columns:[[
                  {field:‘month‘,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);
    });
});

/**
 * 展示图
 * @param data
 */
function showChart(data){
    var monthData = new Array();
    for(var i = 1; i <=12; i++){
        monthData.push(i + "月");
    }
    $(‘#trendChart‘).highcharts({
        title: {
            text: $(‘#year‘).combobox(‘getValue‘) + ‘年销售趋势分析‘,
            x: -20 //center
        },
        subtitle: {
            text: ‘Source: www.itheima.com‘,
            x: -20
        },
        xAxis: {
            categories: monthData
        },
        yAxis: {
            title: {
                text: ‘元  (￥)‘
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: ‘#808080‘
            }]
        },
        tooltip: {
            valuePrefix: ‘￥‘
        },
        legend: {
            layout: ‘vertical‘,
            align: ‘center‘,
            verticalAlign: ‘bottom‘,
            borderWidth: 0
        },
        series: [{
            name: ‘销售额‘,
            data: data
        }]
    });
}

4.2html

<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="ui/highcharts.js"></script>
<script type="text/javascript" src="js/report_trend.js"></script>

</head>
<body class="easyui-layout">
    <div data-options="region:‘center‘,title:‘销售趋势表‘"
        style="padding: 4px; background-color: #eee">
        <div style="height: 2px;"></div>
        <form id="searchForm">
            年份<input class="easyui-combobox"  name="year" id="year"
                data-options="url:‘json/year.json‘,valueField:‘year‘, textField:‘year‘" />
            <button type="button" id="btnSearch">查询</button>
        </form>
        <div style="height: 2px;"></div>
        <table id="grid"></table>
    </div>
    <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘销售统计图‘,spilt:true"
        style="width: 600px;" id="trendChart"></div>

</body>
</html>