銷售趨勢分析折線圖

銷售趨勢分析曲線圖

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>