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>

Summer PHP 框架

ECharts分析xdebug跟踪日志的更多相关文章

  1. 手机自动化测试:Appium源码分析之跟踪代码分析九

    手机自动化测试:Appium源码分析之跟踪代码分析九   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  2. 手机自动化测试:Appium源码分析之跟踪代码分析八

    手机自动化测试:Appium源码分析之跟踪代码分析八   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  3. angular代码分析之异常日志设计

    angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...

  4. elk收集分析nginx access日志

    elk收集分析nginx access日志 首先elk的搭建按照这篇文章使用elk+redis搭建nginx日志分析平台说的,使用redis的push和pop做队列,然后有个logstash_inde ...

  5. mysql通过查看跟踪日志跟踪执行的sql语句

    在SQL SERVER下跟踪sql采用事件探查器,而在mysql下如何跟踪sql呢? 其实方法很简单,开启mysql的日志log功能,通过查看跟踪日志即可. 开启mysql的日志log方法: wind ...

  6. 手机自动化测试:Appium源码分析之跟踪代码分析七

    手机自动化测试:Appium源码分析之跟踪代码分析七   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest推出手机自 ...

  7. 手机自动化测试:Appium源码分析之跟踪代码分析六

    手机自动化测试:Appium源码分析之跟踪代码分析六   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest推出手机自 ...

  8. 手机自动化测试:Appium源码分析之跟踪代码分析五

    手机自动化测试:Appium源码分析之跟踪代码分析五   手机自动化测试是未来很重要的测试技术,作为一名测试人员应该熟练掌握,POPTEST举行手机自动化测试的课程,希望可以训练出优秀的手机测试开发工 ...

  9. Dynamics CRM 2015Online Update1 new feature之 插件跟踪日志

     在最新的CRM2015Online Update1版本中加入了一个新功能-插件跟踪日志,与其说是新功能更应该说是对原有功能的加强,因为ITracingService这个接口在2013中已经引入了, ...

随机推荐

  1. 【9-2】mysql数据库学习01

    mysql安装 下载社区版本MySQL软件包(地址),或者windows installer 接压缩安装包到目标路径 在系统变量Path中加入目标路径 在mysql安装路径下,修改配置文件mysql- ...

  2. TeX — Beauty and Fun

    我是初学者,你推荐使用什么发行的 TeX? 我应该用 LaTeX 吗? 我认为最好的发行是 TeXLive CD,它不但包含了所有操作系统需要的程序,而且有许许多多宏包,如果你不是特别特殊的用户,有了 ...

  3. Linux运维初级教程(三)文件及目录权限

    文件类型 -代表普通文件,d代表目录,l代表链接文件,b或c代表设备. 第二至九个字符代表权限,分别为所有者权限.所属组权限.其他账户权限 修改权限用chmod u用户 g组 o其他用户 a所有人 c ...

  4. java mail

    java mail 1.配置 mvn <dependency> <groupId>javax.mail</groupId> <artifactId>ma ...

  5. 【C语言入门教程】4.9 指向指针的指针

    指针变量可以指向另一个指针变量,这种操作并不是将一个指针变量所指向的内存地址传递给另一个指针变量,而是定义一种指向指针类型的指针变量,可将其称为双重指针.双重指针的定义形式为: 数据类型 **变量名: ...

  6. XML文件数据操作

    #region XML序列化文件和反序列化 /// <summary> /// 通用类的保存函数,可以将已经声明过可序列化的类以文件方式保存起来. /// 保存格式分为 XML明文式和 二 ...

  7. CentOS-6.5安装zabbix2.4.4

    使用epel源  (检查网络连接是否正常)   //这里使用epel源 [root@localhost /]# wget -O /etc/yum.repos.d/CentOS-Base.repo ht ...

  8. BZOJ2051——A Problem For Fun

    0.题意:给出一个N个结点的树,每条边有一个正整数权值,定义两个结点的距离为连接这两个结点路径上边权的和.对于每个结点i,它到其他N-1个结点都有一个距离,将这些距离从小到大排序,输出第K个距离. 1 ...

  9. iOS使用webView 加载网页,在模拟器中没有问题,而真机却白屏了。App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist f

    还在info.plist中配置.除了配置允许上网的配置之外,还有另一项.

  10. Laravel的生命周期

    当你使用一个工具的时候, 如果你对这个工具的内部原理和构造有所了解, 那么在使用这个工具的时候, 就会更加的有信心, 工具用起来也会更加的得心应手. 今天阅读了 Laravel 官方的生命周期文档.这 ...