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中已经引入了, ...
随机推荐
- 利用ant脚本 自动构建svn增量/全量 系统程序升级包
首先请允许我这样说,作为开发或测试,你一定要具备这种 本领.你可以手动打包.部署你的工程,但这不是最好的方法.最好的方式就是全自动化的方式.开发人员提交了代码后,可以自动构建.打包.部署到测试环境. ...
- kafka环境搭建及librdkafka测试
kafka环境搭建及librdkafka测试 (2016-04-05 10:18:25) 一.kafka环境搭建(转自http://kafka.apache.org/documentation.h ...
- motto2
Baby you've done enough that cut your breath.Don't beat yourself up don't need to turn so fast.Somet ...
- php 选择排序法
private function demo(array $arr = array()){ $len = count($arr); if ($len == 1) return $arr; else fo ...
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- python的re正则表达式模块学习
python中re模块的用法 Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工 ...
- 清北暑假模拟day2 将
/* 爆搜,正解弃坑 */ #include<iostream> #include<cstdio> #include<string> #include<cst ...
- hadoop之 flume1.6安装
flume 1.6安装1.解压 2.复制 cp conf/flume-conf.properties.template conf/flume.conf cp conf/flume-env.sh.tem ...
- Mac Pro 安装 Sublime Text 2.0.2，个性化设置，主题 和 插件 收藏
1.到官网下载安装包 http://www.sublimetext.com/2 2.附注册码一枚 ----- BEGIN LICENSE ----- Andrew Weber Single User ...