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相关的数据 ...
随机推荐
- oracle 12c 学习系列(1)–12c初体验
详见原文博客链接地址: oracle 12c 学习系列(1)–12c初体验
- 你可能把A/B测试做错了
大卫奥格威说过,"永远不要停止试验,你的广告也就永远不会停止改进". 在当今的网络世界中,类似于吆喝科技 AppAdhoc A/B Testing 这样的工具越来越多,AB测试和转 ...
- TCP/IP传输层，你懂多少？
1. 传输层的主要功能是什么?2. 传输层如何区分不同应用程序的数据流?3. 传输层有哪些协议?4. 什么是UDP协议?5. 为什么有了UDP,还需要TCP?6. 什么是TCP协议?7. 怎么理解协议 ...
- PHP里文件的查找方式及写法
PHP里说的文件包括:文件和目录1.用filetype方法加路径("./11.txt")是判断文件类型 //var_dump(filetype("./11.txt&quo ...
- oc之封装与类之间的关系
1. 面向对象的特征-封装? 封装: 现实生活中的封装: 将很多的小东西 塞在1个大口袋里面. 好处: a. 对外部屏蔽. b. 方便管理. 代码的封装: 函数/方法 就是1种封装的体现: 将一段代码 ...
- IDEA导入maven项目的步骤
其它的就不多说,直接开始咱们的步骤. 首先,你的装有IDEA,我的是IDEA15的,其次就是你的maven插件来,不过,这些基本的插件,IDEA里基本都给咱下载好了,你就可以直接配置maven.可以去 ...
- Smallest multiple
problem 5:Smallest multiple 题意:求最小的正数,使得其可以被1-20整除 代码如下: #ifndef PRO5_H_INCLUDED #define PRO5_H_INCL ...
- AC日记——字典 codevs 4189
4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 最经,skyzhong得到了 ...
- Factory Pattern(工厂模式)
1.工厂模式简介 工厂模式,专门负责将大量有共同接口的类实例化(用来生产对象).其定义为定义一个用于创建对象的接口,让子类决定实例化那一个类.工厂方法使一个类的实例化延迟到其子类. 工厂模式拥有以下几 ...
- 第一百三十一节，JavaScript，封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...