由于工作需要，需要统计交易数据的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()">
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>
四、页面展示
echart+jquery+json统计TP数据的更多相关文章
-
JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
-
jquery: json树组数据输出到表格Dom树的处理方法
项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...
-
PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
-
通过jquery,从json中读取数据追加到html中
1.下载安装jquery 可通过下面的方法引入在线版本的js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jque ...
-
Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
-
JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
-
ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...
-
转载 ----HTML5 ---js实现json方式提交数据到服务端
json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看. 大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...
-
jQuery源码解读 - 数据缓存系统：jQuery.data
jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...
随机推荐
-
jquey知识点整理
jquery选择器 1.元素选择器: $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro&q ...
-
@UniqueConstraint
jedis UniqueConstraint定义在Table或SecondaryTable元数据里,用来指定建表时需要建唯一约束的列. 元数据属性说明: columnNames:定义一个字符串数组,指 ...
-
dialog横竖屏切换时消失的解决方法
声明 本文原创,转载请注明来自xiaoQLu http://www.cnblogs.com/xiaoQLu/p/3324764.html dialog的生命周期依赖创建他的activity,怎么设置横 ...
-
一个请求过来都经过了什么?(Thrift版)
一.背景 最初遇到这个问题是去58面试.部门领导是原同事,所以面试比较水.水到什么程度呢? 面试就是走个形式而已,不会不过的. 一面面试官就问了一个问题:“一个请求过来都经过了什么?” 剩下的全是闲 ...
-
1. Scala概述
1.1 概述 联邦理工学院洛桑(EPFL)的Martin Odersky于2001年开始设计Scala Scala是Scalable Language的简写,是一门多范式的编程语言 1.2 Scala ...
-
Effective Java 【考虑实现Comparable接口】
Effective Java --Comparable接口 compareTo方法是Comparable接口的唯一方法.类实现了Comparable接口,表明它的实例具有内在的排序关系. 自己实现co ...
-
TCP 原理
一.分组交换网络 古老的电话通信,一根电缆,两个用户设备通信 计算机中的两个设备节点通信:分组网络 计算机网络采取分组交换技术,意思就是我有[一块数据]要发给对方,那我会把这[一块数据]分成N份[ ...
-
JS截取字符串多余的为...
如果截取字符串前几位,多余的用...表示该怎样做呢? JS代码 /** * js截取字符串,中英文都能用 * @param str:需要截取的字符串 * @param len: 需要截取的长度 */ ...
-
npm ERR! Error extracting ~/.npm/cloudant/1.9.0/package.tgz archive: ENOENT: no such file or directory, open &#39;~/.npm/cloudant/1.9.0/package.tgz&#39;
修改package.json Thanks machines returning the above error when , just and now all the builds are pass ...
-
maven package 命令报：-source1.3 中不支持注释错误
在使用maven 打包或者编译时报:-source1.3 中不支持注释错误解决方案如下: <build> <plugins> <plugin> < ...