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()">
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相关的数据 ...
随机推荐
- VIM 多行输入 数字递增 新方法 循环记录法
采用的是mario register这个方法,然后,把一段 auto-increament 操作记录下来,然后playback 循环往复多次.就达到了,每行都递增的目的. 我写的文字如下: vim 输 ...
- STM8S TIM4 初始化设置
#define TIM4_DIV1 (unsigned char)0 #define TIM4_DIV2 (unsigned char)1 #define TIM4_DIV4 (unsigned ch ...
- Android插件简介
/** * @actor Steffen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/steffen */ Android插件简介 Andr ...
- table指定位置添加行
<html> <head> <script type="text/javascript"> //global var //to find the ...
- Linux历史上线程的3种实现模型
一.概述 这里以Linux为例.Linux历史上,最开始使用的线程是LinuxThreads,但Li ...
- CentOS 7下安装X Window
1.网上其他人都这么说: yum check-update yum groupinstall "X Window System" ... 但是运行yum groupinstall ...
- USACO 3.3 A Game
A GameIOI'96 - Day 1 Consider the following two-player game played with a sequence of N positive int ...
- liunx服务器常见监控指标
1. CPU Utilization 英文翻译就是CPU的利用率75%以上就比较高了(也有说法是80%或者更高).有的博客上说除了这个指标外,还要结合Load Average和Context Swit ...
- eclipse集成配置JDK和Tomcat
在eclipse中集成JDK和tomcat服务器方法很简单,我们可以在服务器上运行想要的东西.比如我们学习javaweb时就要用到. 工具/原料 eclipse,JDK,tomcat 方法/步骤 ...
- html5的navigator调用手机震动
navigator.vibrate(s) 或 navigator.webkitVibrate(s),不过该属性只在安卓系统有效.