统计Echarts图表

.jsp

<script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
    var s1 = $("#s1").val();
    if(undefined != s1 && "undefined" != s1 && !isEmpty(s1)){
        var s2 = $("#s2").val();
        var s3 = $("#s3").val();
        var s1Array = s1.split(",");
        var s2Array = s2.split(",");
        var s3Array = s3.split(",");

        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/line' // 使用柱状图就加载line模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('statChart'));
                    var option = {
                        title: {
                            text: '',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['巡查次数', '上报次数', '宣传教育次数']
                        },
                        toolbox: {
                            show: true,
                            feature: {
//                            mark: {show: true},
//                            dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
//                            restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: ['食品安全', '职业卫生', '饮用水卫生', '学校卫生', '公共场所卫生', '非法行医和非法采血']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '巡查次数',
                                type: 'bar',
                                data: s1Array
                            },
                            {
                                name: '上报次数',
                                type: 'bar',
                                data: s2Array
                            },
                            {
                                name: '宣传教育次数',
                                type: 'bar',
                                data: s3Array
                            }
                        ]
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
        );
    }

</script>
<input type="hidden" id="s1" value="${s1}">
<input type="hidden" id="s2" value="${s2}">
<input type="hidden" id="s3" value="${s3}">
<c:if test="${!empty resultList}">
    <div id="statChart" style="height:250px; margin-top: 8px;"></div>

</c:if>

scriptlibs.jsp

<script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script>

后台Control.java

    /**
     * 统计查询
     *
     * @return
     */
    @RequestMapping("/searchStatistic")
    public ModelAndView searchStatistic(StatisticsQueryForm form, String month, String stationId) {
        List<Map<String, Object>> resultList = null;
        String s1 = "";// 巡查次数（图表用）
        String s2 = "";// 上报次数（图表用）
        String s3 = "";// 宣传教育次数（图表用）
        try {
            resultList = patrolService.getStatistic(form.getBeginDate(), form.getEndDate(), stationId);
            if(ObjectUtil.isNotEmpty(resultList)){
                for(Map<String, Object> map : resultList){
                    s1 = s1 + map.get("PATCOUNT") + ",";
                    s2 = s2 + map.get("REPCOUNT") + ",";
                    s3 = s3 + map.get("ATCOUNT") + ",";
                }
                mav.addObject("s1", s1.substring(0, s1.length() - 1));
                mav.addObject("s2", s2.substring(0, s2.length() - 1));
                mav.addObject("s3", s3.substring(0, s3.length() - 1));
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        mav.setViewName("assisstant.patrol.statisticList");
        mav.addObject("resultList", resultList);
        return mav;
    }