echarts3+ajax+json+SpringMVC+mybatis

最近使用的東西有點多，就不分開描述了，寫在一塊兒，也比較連貫

最近在寫統計查詢，因此用到了echarts3，用了幾個小時看了下，仍是不錯的，主要準備好字符串，直接嵌入就能夠

下面我描述下需求，這樣在看代碼還能有一些針對性

需求：實現對訪問記錄的統計，天天一個訪問記錄表，須要根據時間段進行查詢（這裏面就設計到聯調查詢），同時，在頁面點擊某一天的數據時，須要顯示這一天每一個時段的訪問人數（這裏面就有點意思了，用到了ajax+json）

好，先附一張截圖

這就是最後顯示的樣子，下面來點實惠的，上代碼~

我將按照前臺到後臺的順序進行描述

1.首先是頁面

<script src="${ctxStatic}/echarts/echarts.js" type="text/javascript"></script>

 

 使用echarts，這是必須的

 1 <form:form id="searchForm" action="${ctx}/manage/main/visitTime" method="post" class="breadcrumb form-search">
 2         <ul class="ul-form" >
 3                 <li><label>訪問時間：</label>
 4                     <fmt:parseDate value="${beginTime}" pattern="yyyy-MM-dd" var="beginTimeShow"/>
 5                     <fmt:parseDate value="${endTime}" pattern="yyyy-MM-dd" var="endTimeShow"/>
 6                     <input name="beginTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
 7                         value="<fmt:formatDate value="${beginTimeShow}" pattern="yyyy-MM-dd"/>"
 8                         onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'%y-%M-%d'});"/> - 
 9                     <input name="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
10                         value="<fmt:formatDate value="${endTimeShow}" pattern="yyyy-MM-dd"/>"
11                         onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'%y-%M-%d'});"/>
12                 </li>
13                 <li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查詢"/></li>
14                 <li class="clearfix"></li>
15             </ul>
16     </form:form>

 

根據時間段查詢，這裏面用到了fmt的標籤，

fmt:parseDate 和 fmt:formatDate  的配合使用，在頁面現實的時候仍是不錯的，這裏時間控件用的是WdatePicker，引入也很是簡單，這裏就不贅述了

 1 <div class="container-fluid">
 2         <hr>
 3             <div class="row-fluid">
 4                 <div class="span6" align="center">
 5                     <div id="show" style="width: 600px;height:400px;"></div>
 6                 </div>
 7                 <div class="span6" align="center">
 8                     <table id="contentTable" class="table table-striped table-bordered table-condensed" style="margin-left: 10px">
 9                         <thead>
10                             <tr>
11                                 <th width="20%">時間段</th>
12                                 <th width="20%">訪問量</th>
13                                 <th width="20%">訪問人數</th>
14                             </tr>
15                         </thead>
16                         <tbody id="target">
17                             <tr></tr>
18                         </tbody>
19                     </table>
20                 </div>
21             </div>
22 </div>

 

這部分是顯示信息的主體部分，id是show的div，是用於顯示折線圖的目標div，下方的table，是根據選中的信息ajax動態顯示每一個時段信息的主體

 1 <script type="text/javascript">
 2 var show = echarts.init(document.getElementById('show'));
//點擊事件是這樣調用的，當時由於寫這個點擊事件，我可折騰了很久，寫出來才發現，好簡單有木有
 3 show.on("click",handleClick);
//option就是折線圖的主體 4 option = { 5  title: { 6 text: '訪問時段統計' 7  }, 8  tooltip: { 9 trigger: 'axis' 10  }, 11  legend: { 12 data:['訪問人數'] 13  }, 14  grid: { 15 left: '3%', 16 right: '4%', 17 bottom: '15%', 18 containLabel: true 19  }, 20  xAxis: { 21 type: 'category', 22 boundaryGap: false,
　　　　　　　　//這塊的el就是在後臺拼好的字符串，而後直接用於顯示 23  data: [${period}],
　　　　　　　　　//這塊有點意思的，是個小細節，由於顯示的是時間，因此顯示內容比較長，因此，我讓他豎着顯示，這樣，在數據多的狀況下，顯示也很明朗了 24  axisLabel: { 25 rotate: 90, 26  } 27  }, 28  yAxis: { 29 type: 'value' 30  }, 31  series: [ 32  { 33 name:'訪問人數', 34 type:'line', 35 stack: '總量',　　　　　　　　　　　 36  data:[${visitNumber}] 37  } 38  ] 39  }; 40 41 show.setOption(option);
//這塊就是點擊時間的function，注意，括號裏要寫param，否則你會崩潰的 42 function handleClick(param){ 43 var current = param.name;//name得到是X軸的信息，data得到是Y軸的信息，這塊當時也讓老夫好找啊。。
　　　　//這塊就是ajax的請求了，返回json，直接用each進行解析，append到目標顯示主體，固然，記得append以前要html下，否則，後果你懂得 44  $.ajax({ 45 type: "post", 46 url: "${ctx}/manage/main/findVisitCurrentInfo", 47  data:{current:current}, 48 dataType: "json", 49  success: function (data) { 50 $("#target").html(""); 51  $.each(data, function(commentIndex, comment){ 52 $("#target").append("<tr>"+"<td>"+comment['period']+"</td>"+ 53 "<td>"+comment['number']+"</td>"+ 54 "<td>"+comment['userNumber']+"</td>"+ 55 "</tr>"); 56  }); 57  }, 58  error: function (XMLHttpRequest, textStatus, errorThrown) { 59  alert(errorThrown); 60  } 61  }); 62 } 63 </script>

 

這部分js仍是有點意思的~

下面就是java程序的入口了，Controller

 1 @RequestMapping(value = {"visitTime"})
 2     public String visitTime( HttpServletRequest request, HttpServletResponse response, Model model) { 3 String beginTime = request.getParameter("beginTime"); 4 String endTime = request.getParameter("endTime"); 5 StringBuilder visitNumber = new StringBuilder(); 6 StringBuilder period = new StringBuilder(); 7 if(StringUtils.isNotBlank(beginTime) && StringUtils.isNotBlank(endTime)){ 8 LogVisit logVisit = new LogVisit(); 9 logVisit.setBeginVisittime(DateUtils.strToDate(beginTime,"yyyy-MM-dd")); 10 logVisit.setEndVisittime(DateUtils.strToDate(endTime,"yyyy-MM-dd")); 11 List<ShowVisitStatistics> list = logVisitService.findVisitInfo(logVisit); 12 for(ShowVisitStatistics statistics : list){ 13 visitNumber.append(statistics.getNumber() +","); 14 period.append("\""+statistics.getPeriod() +"\"" +","); 15  } 16  } 17 model.addAttribute("beginTime", beginTime); 18 model.addAttribute("endTime", endTime); 19 model.addAttribute("visitNumber", visitNumber); 20 model.addAttribute("period", period); 21 return "modules/manage/visitTime"; 22 }

 

這塊是整理折線圖顯示數據，由於訪問日誌是天天一個表，因此，service中進行了連表

 1 private static String select = "SELECT count(id) AS 'number',date_format(visittime,'%Y-%m-%d') AS 'period' FROM t_log_visit";
 2     /**
 3      * 查詢時間段內的數據
 4      * @param logVisit
 5      * @return
 6      */
 7     public List<ShowVisitStatistics> findVisitInfo(LogVisit logVisit){ 8 StringBuilder sql = new StringBuilder(); 9 sql.append("select b.number AS number,b.period AS period from ("); 10 StringBuilder childSql = new StringBuilder(); 11 String targetChildSql = ""; 12 Calendar cal = Calendar.getInstance(); 13  cal.setTime(logVisit.getBeginVisittime()); 14 Date endData = logVisit.getEndVisittime();
　　　　　　//這裏須要進行一個判斷，由於你要知道，若是時間區間的結束時間是當天，當天的表尚未結轉，因此只能鏈接未結轉的表 15 if(!DateUtils.getDate().equals(endData)){ 16  handelChildSql(endData, childSql, cal); 17 targetChildSql = childSql.substring(0, childSql.length()-9); 18 }else{ 19 Calendar cal1 = Calendar.getInstance(); 20 cal1.add(Calendar.DATE, -1); 21 endData = cal1.getTime(); 22  handelChildSql(endData, childSql, cal); 23 targetChildSql = childSql.append("(" + select +")").toString(); 24 25  } 26  sql.append(targetChildSql); 27 sql.append(") b order by b.period"); 28 return visitDao.findVisitInfo(sql.toString());//動態拼接好sql，直接傳給mybatis 29  } 30 private void handelChildSql(Date endData,StringBuilder childSql, Calendar cal) { 31 while(cal.getTime().compareTo(endData)<=0){ 32 childSql.append("(" + select +"_"+ DateUtils.formatDate(cal.getTime(), "yyyyMMdd")+")"); 33 childSql.append("UNION ALL");//每次append以後，都要加一天 34 cal.add(Calendar.DAY_OF_MONTH,1); 35  } 36 }

 

service中的重點代碼就是這樣啦

1 <select id="findVisitInfo" parameterType="String" resultType="ShowVisitStatistics">
2         ${value}
3     </select>

 

直接傳入字符串，這樣寫就足夠了，很爽~這樣的流程走下來，折線圖所須要的信息，就已經收集好了，直接返回給頁面解析，就能看到效果了
接下來，看下ajax這塊

 1 @RequestMapping(value = {"findVisitCurrentInfo"},method = RequestMethod.POST)
 2  @ResponseBody 3 public String findVisitCurrentInfo( HttpServletRequest request, HttpServletResponse response, Model model) { 4 String current = request.getParameter("current"); 5 if(StringUtils.isNotBlank(current)){ 6 current = current.replaceAll("-", "");//由於個人表結構是table20160323的結構，因此我就直接格式化好直接傳入了 7 List<ShowVisitStatistics> list = logVisitService.findVisitCurrentInfo(current); 8 if(list != null && list.size() > 0){ 9 return JsonUtil.pojoToJson(list); 10  } 11  } 12 return null; 13 }

 

這部分比較簡單，接下來就直接看mybatis文件了

 1 <select id="findVisitCurrentInfo" parameterType="String" resultType="ShowVisitStatistics">
 2         SELECT 
 3  a.hour as period, 4 ifnull(b.number,0) AS number , 5 ifnull(b.userNumber,0) AS userNumber 6  FROM t_hour a 7  LEFT JOIN 8  (SELECT 9  visittime , 10  count(id) AS number, 11  count(distinct accountno) AS userNumber 12  FROM t_log_visit_${value} 13  GROUP BY hour(visittime) 14  ) b 15 ON a.id = hour(b.visittime) 16  ORDER BY a.id 17 </select>

 

得到當天每一個時段的人數，這裏我只能借助輔助表了，新建一個t_hour的表，輔助查詢，這裏面的group by hour，有點意思，這比case when then else end 效率高一些，否則這塊我就寫哭了

mybatis說一下的是，$和 #的用法，前者傳什麼是什麼，後者，就變成字符串了，一個小細節，group by 的時候，要記得用$哈至此，統計查詢模塊就OK了記錄下來，爲了方便之人，也給本身作個總結