1. 程式人生 > >柱狀圖頁面

柱狀圖頁面

@layout("/common/_container.html"){

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>模擬報告統計圖</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <#SelectCon id="province" name="省級" underline="true"></#SelectCon>
                            </div>
                            <div class="col-sm-3">
                                <#button name="搜尋" icon="fa-search" id = "cxMessage"/>
                            </div>
                        </div>
                        <br>
                        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/static/js/highchart/highcharts-zh_CN.js"></script>
<script src="${ctxPath}/static/js/highchart/highcharts.js"></script>
<script src="${ctxPath}/static/js/highchart/exporting.js"></script>
<script src="${ctxPath}/static/js/highchart/drilldown.js"></script>
<script src="${ctxPath}/static/modular/zuwang/zReportGroup/ReportGroupImage.js"></script>

<script>
   $(document).ready(function(){
        zdjia();
        var province = document.getElementById("province").value;
        regionCX(province);

               $("#cxMessage").click(function () {
                   province = document.getElementById("province").value;
                  regionCX(province);
               });


    });

function zdjia() {
    $.ajax({
        async: false,
        type: "post",
        dataType: "json",
        url: "/getAddress/getProvince",
        success: function (data) {
            $("#province").empty();
            $.each(data, function (i, val) {
                $("#province").append($("<option value=" + val.id + ">" + val.region_name + "</option>"));
            })
        },
        error: function (msg) {
            window.top.alert('發生錯誤...' + msg);
        }
    });
}
        //查詢
        function regionCX(province) {
            $.ajax({
                async : false,
                type: "post",
                url: "/testReport/messageInfo?province="+province,
                success : function(data){
                    var strName = [];
                    var intCount = [];
                    for(var key in data) {
                        if (!data.hasOwnProperty(key)) {
                            continue
                        }
                        strName.push(key);
                        intCount.push(data[key]);
                    }
                    messageGroup(strName,intCount);
                    // document.getElementById("strName").value = strName;
                    //document.getElementById("intCount").value = intCount;
                },
                error : function(msg){
                    //window.top.alert('發生錯誤...'+msg);
                }
            });
        }

</script>

@}

後臺介面
省份

 @RequestMapping(value = "/getProvince",method = RequestMethod.POST)
    public List<Map<String,Object>> getProvicne(){
        return izUserService.getProvince();
    }

資料


    /**
     * 統計圖
     */
    @RequestMapping("/messageInfo")
    @ResponseBody
    public Object messageInfo(String province){
        //此ID下多少個下級城市
        List<ZRegion> regionsList = regionService.selectList(new EntityWrapper<ZRegion>().eq("PARENT_ID",province));

        String[] strName = new String[regionsList.size()]; //多少市、區
        Integer[] intCount = new Integer[regionsList.size()]; //對應count
        for (int i = 0; i < regionsList.size(); i++) {
            //獲取報告數量
            int count = testReportService.selectCount(new EntityWrapper<TestReport>().eq("cityId",regionsList.get(i).getId()));
            strName[i] = regionsList.get(i).getRegionName();
            intCount[i] = count;
        }
        Map map = new HashMap();
        for (int i = 0; i < strName.length; i++) {
            map.put(strName[i],intCount[i]);

        }
        return JSONObject.fromObject(map);
    }