ECharts分析xdebug跟踪日志
2015年12月23日 15:36:11 星期三
之前用的是国外的图表工具, 有点麻烦, 文档是英文的, 看着不顺眼,
发现了百度出品的ECharts, 文档比较全, 功能比较多, 做出的图也比较好看, 用起来也比较简单
先解释一下:
两个点之间上下距离相距比较大的说明这两个点之间耗费的内存比较大
两个点之间左右距离相距比较大的说明两点之间耗时比较多
单文件:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<?php
function makeData($file)
{
$fp = fopen($file, 'r');
$arrLineData = [];
$arrDetailData = []; while(!feof($fp)){
$row = fgets($fp);
$row = trim($row);
$arr_now = preg_split('#\s+#', $row); if (count($arr_now) == 5) {
// echo '<pre>';print_r($arr_now); exit();
$x = $arr_now[0]*10000; //时间消耗, 变成整数, 单位ms*10
$y = $arr_now[1]; //内存消耗, 缩小数量级, 单位KB
$arrLineData[] = [$x, $y]; $tmp = [];
$tmp['time_used'] = $arr_now[0];
$tmp['memory_used'] = $arr_now[1];
$tmp['memory_add'] = 0;
$tmp['function'] = $arr_now[3];
$tmp['location'] = $arr_now[4];
$key = $x.'_'.$arr_now[1];
$arrDetailData[$key] = $tmp;
}
} return [$arrLineData, $arrDetailData];
} //读取xdebug trace 数据文件
$cpuData = makeData('./aaa.xt'); ?>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:800px;weight:80%"></div>
<!-- ECharts单文件引入 -->
<script src="./echarts.min.js"></script>
<script type="text/javascript">
var cpuData = <?= json_encode($cpuData)?>;
var line1Name = '跟踪'; // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); option = {
title : {
text: 'PHP效率分析',
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
var x = params[0].value[0];
var y = params[0].value[1]; var key = x+'_'+y;
var obj = cpuData[1][key]; str = '';
str += '时间消耗: '+obj.time_used+"s<br>";
str += '内存消耗: '+obj.memory_used/1024+"KB<br>";
// str += '内存增量: '+obj.memory_add+"B<br>";
str += '函数调用: '+obj.function+"<br>";
str += '所在行: '+obj.location;
return str; }
},
dataZoom: {
show: true,
start : 0
},
legend: {
data:[line1Name]
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type: 'value',
axisLine: {
lineStyle: {
color:'grey',
width:1
}
}
}
],
yAxis : [
{
type: 'value',
axisLine: {
lineStyle: {
color:'grey',
width:1
}
}
}
],
series : [
{
name:line1Name,
type:'line',
data:cpuData[0],
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
两个文件:
图注:
I/O密集型: 一次mysql的联结查询的效率分析
CPU密集型: 将联结查询分成两次简单查询, 并借助PHP计算得到最终结果的效率分析
代码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<?php
function makeData($file)
{
$fp = fopen($file, 'r');
$arrLineData = [];
$arrDetailData = []; while(!feof($fp)){
$row = fgets($fp);
$row = trim($row);
$arr_now = preg_split('#\s+#', $row); if (count($arr_now) > 2 && is_numeric($arr_now[0])) {
$x = $arr_now[0]*10000; //时间消耗, 变成整数, 单位ms*10
$y = $arr_now[1]/1000; //内存消耗, 缩小数量级, 单位KB
$arrLineData[] = [$x, $y]; $tmp = [];
$tmp['time_used'] = $arr_now[0];
$tmp['memory_used'] = $arr_now[1];
$tmp['memory_add'] = $arr_now[2];
$tmp['function'] = $arr_now[4];
$tmp['location'] = $arr_now[5];
$key = $x.'_'.$arr_now[1];
$arrDetailData[$key] = $tmp;
}
} return [$arrLineData, $arrDetailData];
} $cpuData = makeData('./file/trace._test_index_ab_cpu_XDEBUG_TRACE=start_trace.xt');
$ioData = makeData('./file/trace._test_index_ab_io_XDEBUG_TRACE=start_trace.xt'); ?>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
var cpuData = <?= json_encode($cpuData)?>;
var ioData = <?= json_encode($ioData)?>;
var line1Name = 'CPU密集型';
var line2Name = 'I/O密集型'; // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); option = {
title : {
text: 'PHP效率分析',
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
var x = params.value[0];
var y = params.value[1]; var key = x+'_'+y*1000;
if (params.seriesName == line1Name) {
var obj = cpuData[1][key];
} else {
var obj = ioData[1][key];
}
str = params.seriesName+': <br>';
str += '时间消耗: '+obj.time_used+"s<br>";
str += '内存消耗: '+obj.memory_used/1024+"KB<br>";
str += '内存增量: '+obj.memory_add+"B<br>";
str += '函数调用: '+obj.function+"<br>";
str += '所在行: '+obj.location;
return str;
}
},
dataZoom: {
show: true,
start : 0
},
legend: {
data:[line1Name, line2Name]
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type: 'value',
axisLine: {
lineStyle: {
color:'grey',
width:1
}
}
}
],
yAxis : [
{
type: 'value',
axisLine: {
lineStyle: {
color:'grey',
width:1
}
}
}
],
series : [
{
name:line1Name,
type:'line',
data:cpuData[0],
},
{
name:line2Name,
type:'line',
data:ioData[0]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
ECharts分析xdebug跟踪日志的更多相关文章
- 手机自动化测试：Appium源码分析之跟踪代码分析九
手机自动化测试:Appium源码分析之跟踪代码分析九 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...
- 手机自动化测试：Appium源码分析之跟踪代码分析八
手机自动化测试:Appium源码分析之跟踪代码分析八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...
- angular代码分析之异常日志设计
angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...
- elk收集分析nginx access日志
elk收集分析nginx access日志 首先elk的搭建按照这篇文章使用elk+redis搭建nginx日志分析平台说的,使用redis的push和pop做队列,然后有个logstash_inde ...
- mysql通过查看跟踪日志跟踪执行的sql语句
在SQL SERVER下跟踪sql采用事件探查器,而在mysql下如何跟踪sql呢? 其实方法很简单,开启mysql的日志log功能,通过查看跟踪日志即可. 开启mysql的日志log方法: wind ...
- 手机自动化测试：Appium源码分析之跟踪代码分析七
手机自动化测试:Appium源码分析之跟踪代码分析七 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest推出手机自 ...
- 手机自动化测试：Appium源码分析之跟踪代码分析六
手机自动化测试:Appium源码分析之跟踪代码分析六 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest推出手机自 ...
- 手机自动化测试：Appium源码分析之跟踪代码分析五
手机自动化测试:Appium源码分析之跟踪代码分析五 手机自动化测试是未来很重要的测试技术,作为一名测试人员应该熟练掌握,POPTEST举行手机自动化测试的课程,希望可以训练出优秀的手机测试开发工 ...
- Dynamics CRM 2015Online Update1 new feature之 插件跟踪日志
在最新的CRM2015Online Update1版本中加入了一个新功能-插件跟踪日志,与其说是新功能更应该说是对原有功能的加强,因为ITracingService这个接口在2013中已经引入了, ...
随机推荐
- Chrome插件开发
参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/370 ...
- CSS实现底部固定
html代码结构 <body> <div class="wrap"> <div class="head"></div& ...
- logrotate关于日志轮询和分割
如果你的是源码包安装的服务,那么对于Linux服务器上的一些服务在运行当中产生的日志很重要,可以判断你的服务是否有异常等,但源码包安装的日志是没有日志的轮询或者说是切割能力的, 所以你就需要用到bas ...
- 单例模式singleton
在进行开发的时候,我们在有些情形下有些对象我们只需要一个.例如:配置文件.工具类.线程池.缓存.日志对象等. 如何保证我们的对象只有一个呢?我们可以通过单例来实现. 常用的单例有两种:饿汉模式和懒汉模 ...
- cocos布局分析
HBox和VBox布局 HBox只是一个水平布局包装类. HBox里面所有的孩子节点都会水平排列成一行 VBox仅仅是对垂直布局的一个简便的类封装. VBox把它的子节点布局在一竖列中. Layout ...
- Linux下安装和配置JDK与Tomcat（入门版）
JDK路径:/usr/java/jdk1.6.0_25 Tomcat路径:/usr/local/apache-tomcat 1. 下载jdk6.0(选择“.rpm.bin”结尾的,6u25版本) ht ...
- redis.1--SDS结构
1. Redis 没有直接使用c语言的字符串(以空字符结尾的字符数组),而是自己构建了一 种名为简单动态字符串(Simple Dynamic String , SDS),并将SDS做为 ...
- php导入导出cvs文件格式
1.导入 <?php header("Content-type: text/html; charset=gb2312"); $fname = $_FILES['myfile' ...
- iOS开发——UI进阶篇（四）tableView的全局刷新，局部刷新，左滑操作，左滑出现更多按钮，进入编辑模式，批量删除，自定义批量删除
首先创建项目,在storyboard如下布局控件,设置好约束 然后创建cell模型类XMGWineCell数据模型类XMGWine创建UITableView,设置数据源协议,实现数据源方法懒加载数据这 ...
- java项目导入IntelliJ IDEA
(0)之所以有第0步,是因为第一次倒入失败,所以从删除上次倒入的数据开始- 开始删除数据. 启动Intelli J,点击右键删除上次的导入的项目 把配置拷贝到.m2文件夹下,并且删除上次下载的一些依赖 ...