智销功能_图表展现

什么是报表

　　向上级报告状况的表格。简单的说：报表就是用表格、图表等格式来动态显示数据，能够用公式表示为：

　　　　“报表 = 多样的格式 + 动态的数据

　　　　表格：详细数据

　　　　图表: 直观

图表展现

• 两种技术: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; }