echart+jquery+json统计TP数据

由于工作需要，需要统计交易数据的TP50，TP90，TP95，TP99。采用的前端技术是jquery+json+echart。

一、TP定义（谷歌）

Calculating TP is very simple:

1. Sort all times in ascending order: [2s, 10s, 100s, 1000s]

2. find latest item in portion you need to calculate.
　　2.1 For TP50 it will be ceil(4*0.5) = 2 requests. You need 2nd request.
　　2.2 For TP90 it will be ceil(4*0.9) = 4. You need 4th request.

3. We get time for the item found above. TP50=10s. TP90=1000s

二、json数据结构

{

"2017-01-01": {

"tp50": {

　　"cost": 0.628

},

"tp90": {

　　"cost": 0.655

},

"tp95": {

　　"cost": 0.796

},

"tp99": {

　　"cost": 1.907

}

},

"2017-01-02": {

"tp50": {

　　"cost": 0.614

},

"tp90": {

　　"cost": 0.645

},

"tp95": {

　　"cost": 0.784

},

"tp99": {

　　"cost": 2.224

}

},

"2017-01-03": {

"tp50": {

　　"cost": 0.615

},

"tp90": {

　　"cost": 0.651

},

"tp95": {

　　"cost": 0.808

},

"tp99": {

　　"cost": 2.745

}

}

}

三、前端页面代码片段

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>tp</title>
 <script src="js/echarts.js"></script>
 <script src="js/jquery-3.1.1.min.js"></script>
 <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
 <script>
     $(document).ready(function() {
         $("button").click(function() {
             var startDate = $("#startDate").val();
             var endDate = $("#endDate").val();
             $.getJSON({
                 url : "/ipos-timer/getTpList",
                 data:"startDate="+startDate+"&endDate="+endDate,
                 success : function(data) {
                     myChart.setOption({
                         xAxis : {
                             data : data.range
                         },
                         series : [ {
                             name : 'tp50',
                             data : data.tp50
                         }, {
                             name : 'tp90',
                             data : data.tp90
                         }, {
                             name : 'tp95',
                             data : data.tp95
                         }, {
                             name : 'tp99',
                             data : data.tp99
                         } ]
                     });
                 }
             });
         });
     });
 </script>
 </head>
 <body>
     start:
     <input class="Wdate" id="startDate" type="text" onClick="WdatePicker()">
     &nbsp; end:
     <input class="Wdate" id="endDate" type="text" onClick="WdatePicker()">
     <button>search</button>
     <div id="main" style="width: 1200px; height: 400px;"></div>
     <script>
         var myChart = echarts.init(document.getElementById('main'));
         option = {
             tooltip : {
                 trigger : 'axis'
             },
             legend : {
                 data : [ 'tp50', 'tp90', 'tp95', 'tp99' ]
             },
             toolbox : {
                 show : true,
                 feature : {
                     mark : {
                         show : true
                     },
                     dataView : {
                         show : true,
                         readOnly : false
                     },
                     dataZoom : {
                         show : true
                     },
                     magicType : {
                         show : true,
                         type : [ 'line', 'bar', 'stack', 'tiled' ]
                     },
                     restore : {
                         show : true
                     },
                     saveAsImage : {
                         show : true
                     }
                 }
             },
             dataZoom : {
                 show : true,
                 realtime : true,
                 start : 0,
                 end : 100
             },
             calculable : true,
             xAxis : [ {
                 type : 'category',
                 boundaryGap : false,
                 data : []
             } ],
             yAxis : [ {
                 type : 'value'
             } ],
             series : [ {
                 name : 'tp50',
                 type : 'line',
                 stack : '总量',
                 data : []
             }, {
                 name : 'tp90',
                 type : 'line',
                 stack : '总量',
                 data : []
             }, {
                 name : 'tp95',
                 type : 'line',
                 stack : '总量',
                 data : []
             }, {
                 name : 'tp99',
                 type : 'line',
                 stack : '总量',
                 data : []
             } ]
         };
         myChart.setOption(option);
     </script>
 </body>
 </html>

四、页面展示