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相关的数据 ...
随机推荐
- 国外大师给PHP初学者的8条建议
学习一门新语言可能会是一件很艰巨的任务,最好的办法就是借鉴前辈的经验已达到事半功倍,下面就是为php新手们准备的一些经验餐. 1.从OOP开始Naramore是SourceForge员工以及PHPWo ...
- 提高你的Java代码质量吧：不要让类型默默转换
一.分析 在Java运算中的类型转换,是先运算在进行类型转换的.具体场景如下. 二.场景 在如下程序中: public class Client{ public static final int ...
- 给你的git仓库瘦身
很久没有写博客了,最近遇到了一个git问题,比较典型,记录下来与大家分享. 我们使用git版本控制的时候享受了很多便利,不管是代码合并,分支提供给我们的并发,但我们也往往忽略了每次提交之后在我们本地项 ...
- Lock与synchronized 的区别
多次思考过这个问题,都没有形成理论,今天有时间了,我把他总结出来,希望对大家有所帮助 1.ReentrantLock 拥有Synchronized相同的并发性和内存语义,此外还多了 锁投票,定时锁等候 ...
- Python基础1-变量、运算符、表达式
一.Python的安装 1.下载python安装包https://www.python.org/ 2.选择对应的Python版本(Windows下) 3.装完之后打开电脑的cmd,验证一下安装是否成功 ...
- [avalon]data-repeat-rendered循环渲染完毕后的回调函数
有些时候需要在渲染完毕后,引用其他类似JQ插件的初始化工作.这时候需要使用data-repeat-rendered的回调函数. 应用场景: 在metro-start界面下,需要给每个tile引用cli ...
- jboss服务启动失败报：Error occurred during initialization of VM
今天下午突然间公司的GTV管理平台上不去了 访问确实,提示找不到页面 登录终端查看服务进程. ps -ef | grep jboss 发现没有这个进程.怎么办,启动被. 输入nohup /home/c ...
- jquery开头
jQuery(function(){});jQuery().ready(function(){}); 绑定点击事件: jQuery('#temp').click(function() {}); $(d ...
- .Net 生成条形码
1,下面一个类,可以直接复制下去使用: public class Code39 { private Hashtable m_Code39 = new Hashtable(); ...
- http服务 Web API的使用
http服务 Web API的使用 一.概念: Web API是网络应用程序接口. 详情百度百科: http://baike.baidu.com/link?url=X1l2dlU9FlQmupX24- ...