柱狀圖頁面
阿新 • • 發佈:2018-12-14
@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); }