jeecg综合统计图和表

jeecg版本3.7.2
效果:效果上柱状图下表
菜单配置
knowledgeController.do?knostatics
controller中设置对应页面

@RequestMapping(params = "knostatistic")
    public ModelAndView knostatistic(HttpServletRequest request) {
        return new ModelAndView("com/jeecg/knowledge/knostatistic");
    }

knostatistic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>    <!--引头文件,t,c等-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- context path -->
<t:base type="jquery,easyui"></t:base>
<script type="text/javascript" src="plug-in/Highcharts-2.2.5/js/highcharts.src.js"></script>
<script type="text/javascript" src="plug-in/Highcharts-2.2.5/js/modules/exporting.src.js"></script>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />       <!--${pageContext.request.contextPath}获取当前根目录  -->
<script type="text/javascript">
$(function() {
    $(document).ready(function() {
        var chart;
        $.ajax({
            type : "POST",
            url : "knowledgeController.do?knowledgeCount&reportType=column",    //柱图
            success : function(jsondata) {
                data = eval(jsondata);

                //console.log(data);//Highcharts报表插件bug,IE8下不能出现该语句,否则报表不显示                 

                chart = new Highcharts.Chart({
                    chart : {
                        renderTo : 'containerCol',//放置容器,对应div的id
                        plotBackgroundColor : null,
                        plotBorderWidth : null,
                        plotShadow : false
                    },
                    title : {    //表标题
                        text : '各类别知识数量统计-<b><t:mutiLang langKey="common.histogram"/></b>'
                    },
                    xAxis : {   //x坐标

                        categories : [ '123', 'bbb', 'ccc', '忘记登录系统密码', '数据库问题','服务器','知识库','邮件服务器问题']

                    },
                    tooltip : {  // 配置数据点提示框
                         percentageDecimals : 1,
                         formatter: function() {
                            return  '<b>'+this.point.name + '</b>:' +  this.y;
                        }

                    },
                    exporting:{    //导出直接用jeecg给出导出
                        filename:'column',  
                        url:'${ctxPath}/jeecgListDemoController.do?export'
                    },
                    plotOptions : {    //每个柱的设置
                        column : {
                            allowPointSelect : true,//允许被点击
                            cursor : 'pointer',     //鼠标形状
                            showInLegend : true,    //显示图例
                            dataLabels : {          //数据标签
                                enabled : true,
                                color : '#000000',
                                connectorColor : '#000000',
                                formatter : function() { 
/*标签格式化回调函数,本情况直接返回数据即可,如果是保留一位小数
return '<b>' + this.point.name + '</b>: '
 + Highcharts.numberFormat(this.percentage, 1)+"%";*/
                            return  this.y;   

                                }
                            }
                        }
                    },

                    series:data//,IE8不喜欢多余的逗号

                });
            }
        });
    });
});
</script>
</head>
<body>
<div id="containerCol" style="width: 100%;height:333px;"></div><!--图-->
<div style="width: 100%; height: 333px;"><!--表-->
<!--update-end--Author:xuelin  Date:20170804 for:TASK #2246 【IE兼容问题】两个报表,不兼容IE8,代码优化     固定高度,否则部分浏览器下(chrome,IE8),数据表不显示------------------- -->
    <t:datagrid name="knoStatisticList" title="各类别知识数量统计" actionUrl="knowledgeController.do?knotypestatistic" idField="id" fit="true">
        <t:dgCol title="common.code" field="id" hidden="true"></t:dgCol>
        <t:dgCol title="知识类别" field="knotype" width="130"></t:dgCol>
        <t:dgCol title="数量" field="typecount" width="130"></t:dgCol>
    </t:datagrid>
</div>

<script type="text/javascript">
    $(function(){
        $(document.body).css("width","99.3%");
    });
</script>

controller中几个方法

@RequestMapping(params = "knotypestatistic")
    public void listAllStatisticByJdbc(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {
        List<Map<String,Object>> maplist=systemService.findForJdbc("select k.kno_type knotype ,count(*) typecount from knowledge k group by k.kno_type", null);
        //Long countSutent = systemService.getCountForJdbc("select count(*) from t_s_log where 1=1");
        Long count = 0L;
        if(JdbcDao.DATABSE_TYPE_SQLSERVER.equals(DBTypeUtil.getDBType())){   //根据数据库类型查询数据
            count = systemService.getCountForJdbcParam("select count(0) from (select k.kno_type knotype ,count(*) typecount from knowledge k group by k.kno_type) as t( knotype, typecount)",null);
        }else{
            count = systemService.getCountForJdbcParam("select count(0) from (select k.kno_type knotype ,count(*) typecount from knowledge k group by k.kno_type)t",null);
        }
        dataGrid.setTotal(count.intValue());
        dataGrid.setResults(maplist);
        TagUtil.datagrid(response, dataGrid);
    }

    /**
     * highchart
     * 
     * @return
     */
    @RequestMapping(params = "knowledgeCount")
    @ResponseBody
    public List<Highchart> studentCount(HttpServletRequest request,String reportType, HttpServletResponse response) {
        List<Highchart> list = new ArrayList<Highchart>();
        Highchart hc = new Highchart();
        StringBuffer sb = new StringBuffer();
        sb.append("select knoType as knotype ,count(*) as typecount from KnowledgeEntity group by kno_type");
        //注意这里的knoType和KnowledgeEntity,与实体对应,不能是表字段名和表名
        List knotypeList = systemService.findByQueryString(sb.toString());
        //Long count = systemService.getCountForJdbc("SELECT COUNT(1) FROM T_S_Log WHERE 1=1");
        List lt = new ArrayList();
        hc = new Highchart();
        hc.setName("知识类别统计");
        hc.setType(reportType);
        Map<String, Object> map;
        if (knotypeList.size() > 0) {
            for (Object object : knotypeList) {
                map = new HashMap<String, Object>();
                Object[] obj = (Object[]) object;
                map.put("name", obj[0]);
                map.put("y", obj[1]);
                lt.add(map);
            }
        }
        hc.setData(lt);
        list.add(hc);
        return list;
    }

猜你喜欢

转载自blog.csdn.net/chuanshang181/article/details/81333804
今日推荐