智销功能_图表展示

什么是报表

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

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

　　　　表格：详细数据

　　　　图表: 直观

图表展示

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