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相关的数据 ...
随机推荐
- gsoap：实现线程池处理时获取到客户端的ip
问题: 在使用线程池处理客户端请求时发现不能获取到客户端的ip! 原因: 由于在server_loop注循环中只把连接字sock加到queue队列中,并没有客户端IP,所以每一次queue回调 ...
- 提高你的Java代码质量吧：不要让类型默默转换
一.分析 在Java运算中的类型转换,是先运算在进行类型转换的.具体场景如下. 二.场景 在如下程序中: public class Client{ public static final int ...
- mysql之多列索引
mysql的多列索引是经常会遇到的问题,怎样才能有效命中索引,是本文要探讨的重点. 多列索引使用的Btree,也就是平衡二叉树.简单来说就是排好序的快速索引方式.它的原则就是要遵循左前缀索引. 多个索 ...
- 办理阿尔伯塔大学(本科)学历认证『微信171922772』Alberta学位证成绩单使馆认证University of Alberta
办理阿尔伯塔大学(本科)学历认证『微信171922772』Alberta学位证成绩单使馆认证University of Alberta Q.微信:171922772办理教育部国外学历学位认证海外大学毕 ...
- Extjs的GridPanel分页前后台完整代码实例
第一次写文章啊,有些冲动.最近在公司学习Extjs,做了一个分页的小实例和大家分享. 1.首先编写paging-grid.js文件,这是我在网上参考的例子改写的,大同小异. Ext.onReady(f ...
- ORA-01940无法删除当前已连接用户
原文地址:ORA-01940无法删除当前已连接用户作者:1736188794 1)查看用户的连接状况 select username,sid,serial# from v$session ------ ...
- [前端性能提升]--图片转化为base64
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...
- vue.js之个人总结
1.MVVM模式 MVVM模式(Model-View-ViewModel)的运作如下图: 1)上图解析:ViewModel是Vue.js的核心,它是一个Vue实例.Vue实例是作用于某一个HTML元素 ...
- Selenium也是一个用于Web应用程序测试的工具
Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite ...
- 学习Sass（一）
一.什么是sass? 写过css的都知道,css是用来改变页面样式的.但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板.在这个工具决定效率的时代,这是不能容忍的事情.怎样 ...