Echarts3+ajax+json+springmvc+mybatis

Recently used a little bit more, do not separate description, written together, but also more coherent

Recently in writing statistics query, so used to Echarts3, took a few hours to see the next, or good, mainly prepared strings, directly embedded can

Below I describe the requirements, so that you can see the code to have some specific

Requirements: To achieve the statistics of access records, a daily access to the record table, you need to query according to the time period (where the design to the query), at the same time, when the page click on the data of a day, you need to show the day of each time of the visit (here is a bit of meaning, used to Ajax+json)

Okay, I'll have one.

This is the last display, the next point of the affordable, on the code ~

I will follow the foreground to the background in the order of description

1. First is the page

<script src= "${ctxstatic}/echarts/echarts.js" type= "Text/javascript" ></script>

Using Echarts, this is a must.

 1 <form:form id= "searchform" action= "${ctx}/manage/main/visittime" method= "post" class= "breadcrumb form-search"                     > 2 <ul class= "Ul-form" > 3 <li><label> Access time:</label> 4 <fmt:parsedate value= "${begintime}" pattern= "Yyyy-mm-dd" var= "Begintimeshow"/> 5 <fmt:par Sedate value= "${endtime}" pattern= "Yyyy-mm-dd" var= "Endtimeshow"/> 6 <input name= "BeginTime" Typ  E= "text" readonly= "readonly" maxlength= "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= "class=" Input-medium  Wdate "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-prima Ry "type=" submit "value=" Query "/></li>14 <li class=" Clearfix "></li>15 </u L>16 </form:form>

Depending on the time period, the FMT label is used here.

Fmt:parsedate and Fmt:formatdate with the use of the  page in the reality of the time is still good, where the time control is Wdatepicker, introduced is very simple, here do not repeat the

 1 <div class= "Container-fluid" > 2 

This part is the main part of the display information, the ID is the div of show, is the target Div for displaying the line chart, the table below is the main body that dynamically displays the information of each period according to the selected information Ajax

1 <script type= "Text/javascript" > 2 var show = Echarts.init (document.getElementById (' show ')));
Click the event is called, at that time because of writing this click event, I can toss a long, write to find, good simple has 3 Show.on ("click", Handleclick);
option is the body of a line chart 4 option ={5Title: {6 text: ' Access window Stats ' 7}, 8ToolTip: {9 trigger: ' Axis ' 10},11Legend: {data:[' visitors ']13},14Grid: {left: ' 3% ', right: ' 4% ', bottom: ' 15% ', Containlabel:true19},20Xaxis: {type: ' Category ', Boundarygap:false,
This El is a string that is spelled in the background and is then used directly to display 23Data: [${period}],
This is a little bit of meaning, is a small detail, because the display is time, so the content is relatively long, so I let him display vertically, so that in the case of more data, the display is very clear 24AxisLabel: {rotate:90, 26}27},28YAxis: {type: ' value ' 30},31Series: [32{name: ' Visitors ', type: ' line ', stack: ' Total ', 36Data:[${visitnumber}]37}38]39};40 41show.setoption (option);
This is the function of the click Time, note that the parentheses to write param, or you will collapse 42 function Handleclick (param) {$ var current =  Param.name;//name obtained is the x-axis information, the data obtained is the y-axis information, this block at that time also let the Ladyship find AH. 
//This is the AJAX request, return JSON, directly with each to parse, append to the target display body, of course, remember append before the HTML, otherwise, the consequences you know  $.ajax ({type: "POST" span>, url: "${ctx}/manage/main/findvisitcurrentinfo" ,  data:{current:current},48 dataType: "JSON" span>, for  success:function (data) {$ ("#target"). HTML ("" );  $.each (data, function (Commentindex, C omment) {$ ("#target"). Append ("<tr>" + "<td>" +comment[' period ']+ "</td>" +53 "<td>" +comment [' Number ']+ ' </td> ' +54 ' <td> ' +comment[' usernumber ']+ ' </td> ' +55 ' </tr> '  '); }); Error:function }, (XMLHttpRequest, Textstatus, Errorthrown) { alert (errorthrown)  } });}63 </script>           

This Part JS still has a bit of meaning ~

The following is the Java program's entry, Controller
1 @RequestMapping (value = {"Visittime")}) 2 PublicString Visittime (HttpServletRequest request, httpservletresponse response, model model) {3 string beginTime = Re Quest.getparameter ("BeginTime"); 4 String endTime = Request.getparameter ("EndTime"); 5 StringBuilder visitnumber = newStringBuilder (); 6 StringBuilder period = newStringBuilder (); 7 if (Stringutils.isnotblank (beginTime) && Stringutils.isnotblank (endTime)) {8 Logvisit logvisit = new logvisit (); 9 Logvisit.setbeginvisittime (Dateutils.strtodate (BeginTime, "Yyyy-mm-dd") ): Logvisit.setendvisittime (Dateutils.strtodate (EndTime, "Yyyy-mm-dd")); list<showvisitstatistics> List = Logvisitservice.findvisitinfo (logvisit);showvisitstatistics statistics:list) {13 Visitnumber.append (Statistics.getnumber () + ","), Period.append ("\" "+statistics.getperiod () +" \ "" + ","); }16 }17 model.addattribute ("BeginTime", BeginTime); Model.addattribute ("EndTime", EndTime); Model.addattribute ("Visitnumber", Visitnumber), Model.addattribute ("period", period), return " Modules/manage/visittime ";              
This piece is a line chart that shows the data because the access log is a table every day, so the service is connected to the table
1 private static String select = "SELECT count (id) as ' number ', Date_format (visittime, '%y-%m-%d ') as ' period ' from T_log_vi Sit; 2/** 3 * Data within the query period 4 * @param logvisit 5 * @return 6 */7 public list<showvisitstatistics& GtFindvisitinfo (Logvisit logvisit) {8 StringBuilder sql = newStringBuilder (); 9 Sql.append ("Select B.number as number,b.period as period from"); StringBuilder childsql = newStringBuilder (); String targetchildsql = ""; Calendar cal =Calendar.getinstance (); 13Cal.settime (Logvisit.getbeginvisittime ()); Date Enddata =Logvisit.getendvisittime ();
You need to make a judgment here, because you have to know that if the end time of the time period is the same day, the table of the day has not been carried forward, so you can only connect the non-closing table if (!Dateutils.getdate (). Equals (Enddata)) {16 Handelchildsql (Enddata, Childsql, cal); targetchildsql = childsql.substring (0, Childsql.length ()-9 ):}else{Calendar cal1 = calendar.getinstance (); Cal1.add (Calendar.date,-1); enddata =  Cal1.gettime (); handelchildsql (Enddata, Childsql, cal), Targetchildsql = Childsql.append ("(" + Select + ")") . toString (); }26 sql.append (targetchildsql); Sql.append (") b Order by b.period"); return visit Dao.findvisitinfo (Sql.tostring ());//dynamic splicing good SQL, directly to mybatis29 }30 private void handelchildsql (Date enddata, StringBuilder Childsql, Calendar cal) {cal.gettime (). CompareTo (enddata) <=0) {childsql.append ("+" + Select + "_" + dateutils.formatdate (Cal.gettime (), "yyyyMMdd") + ")",childsql.append ("UNION all");// After each append, add a day Cal.add (calendar.day_of_month,1); }36}       
This is the key code in the service.
        ${value}3     </select>
directly into the string, so write is enough, very cool ~ Such a process to go down, the line chart required information, has been collected, and directly returned to the page parsing, you can see the effect of
Next, look at this piece of Ajax.
1 @RequestMapping (value = {"Findvisitcurrentinfo"},method =    @ResponseBody 3     public String Findvisitcurrentinfo (HttpServletRequest request, httpservletresponse response, model) {4         String current = req Uest.getparameter ("current"), 5         if(Stringutils.isnotblank (current)) {6 Current             = Current.replaceall ("-", "");//Because my table structure is the structure of table20160323, so I directly formatted to directly pass in the 7 list<showvisitstatistics> List = Logvisitservice.findvisitcurrentinfo (current); 8 if (list! = null && list.size () > 0) {9 return
           
            }12 return null
            ; 
                 
This part is relatively simple, then directly look at the MyBatis file.
        SELECT              a.hour as period,  4             ifnull (b.number,0) as number, 5             ifnull (b.usernumber,0           ) B15 on a.id = ORDER by a.id17 </select>    
To get the number of people per hour of the day, here I can only use the auxiliary table, a new t_hour table, auxiliary query, the group by hour, this is more efficient than the case and then else end, otherwise this piece I will write to cry
MyBatis said that the $ and #的用法, the former pass what is what, the latter, becomes a string, a small detail, group by when, to remember with $ ha
At this point, the statistical query module is OK
Record down, for the convenience of people, also to make a summary of their own
Echarts3+ajax+json+springmvc+mybatis