智銷功能_圖表展現

什麼是報表

　　向上級報告狀況的表格。簡單的說：報表就是用表格、圖表等格式來動態顯示數據，能夠用公式表示爲：

　　　　「報表 = 多樣的格式 + 動態的數據

　　　　表格：詳細數據

　　　　圖表: 直觀

圖表展現

• 兩種技術:flash(actionscript),h5(畫布)
• flash缺點:不安全,容易崩潰
• IE的話只能是flash的方式
• 兩個框架:highchart(收費,支持IE),echart(百度,開源免費)

 前端使用

1引入相應的js

<!-- 引入highcharts的js支持 --> <script src="/js/plugin/highcharts/code/highcharts.js"></script> <script src="/js/plugin/highcharts/code/highcharts-3d.js"></script> <script src="/js/plugin/highcharts/code/modules/exporting.js"></script> <script src="/js/plugin/highcharts/code/modules/export-data.js"></script> 

2 彈出div進行展現

1. 準備彈出來的

<!-- 一個彈出框,裏面要裝一個form表單 --> <div id="chartDialog" class="easyui-dialog" title="圖表展現" data-options="height:400,width:600,closed:true,modal:true"> <div id="container" style="height: 320px"></div> </div> 

2. 點擊3D按鈕彈出圖表

show3d(){ chartDialog.dialog("center").dialog("open"); //拿到表單中的全部數據 var params = searchForm.serializeObject(); //經過Ajax到後臺拿到相應的值[{name:xxx,y:10},] $.post("/purchasebillitem/findCharts",params,function (data) { //注意這裏有一個異步問題 var chart = Highcharts.chart('container', {  chart: {  type: 'pie', //餅圖  options3d: {  enabled: true,  alpha: 45,  beta: 0 } },  title: {  text: '我是一個頭' },  tooltip: {  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },  plotOptions: {  pie: {  allowPointSelect: true,  cursor: 'pointer',  depth: 35,  dataLabels: {  enabled: true,  format: '{point.name}' } } },  series: [{  type: 'pie',  name: '瀏覽器有',  data: data }] }); }) } 

 後臺獲取參數

1.修改query中的方法

// where o.bill.status = ? and o.xxx =? ... //接收參數的變量 private List params = new ArrayList(); //準備一個方法，返回JPQL的查詢條件 public String createWhereJPQL(){ StringBuilder jpql = new StringBuilder(); //開始時間 if(beginDate!=null){ jpql.append(" and o.bill.vdate >= ? "); params.add(beginDate); } //結束時間 if(endDate!=null){ jpql.append(" and o.bill.vdate < ? "); params.add(DateUtils.addDays(endDate, 1)); } //狀態 if(status!=null){ jpql.append(" and o.bill.status = ? "); params.add(status); } //第一個條件必需是where開頭 return jpql.toString().replaceFirst("and", "where"); } //建立分組的JPQL public String createGroupBy(){ String groupStr = "o.bill.supplier.name"; switch (groupBy){ case 1:{ groupStr="o.bill.buyer.username"; break; } case 2:{ groupStr="MONTH(o.bill.vdate)"; break; } } return groupStr; } 

2.PurchasebillitemServiceImpl

/** * 查詢圖表須要的數據 * @param query */ @Override public List<Map> findCharts(PurchasebillitemQuery query){ List<Map> mapList = new ArrayList<>(); //拿到條件JPQL String whereJPQL = query.createWhereJPQL(); //拿到條件對應的參數 List params = query.getParams(); //準備分組的條件 String groupBy = query.createGroupBy(); //根據供應商分組拿到的數據 String jpql = "select "+groupBy+",sum(o.amount) from Purchasebillitem o "+whereJPQL+" group by "+groupBy; List<Object[]> list = findByJpql(jpql,params.toArray()); //須要把一個List<Object[]> -> List<Map> for (Object[] objects : list) { Map map = new HashMap(); map.put("name", objects[0]); map.put("y", objects[1]); mapList.add(map); } return mapList; }