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中已经引入了, ...
随机推荐
- spring 后置处理器BeanFactoryPostProcessor和BeanPostProcessor的用法和区别
主要区别就是: BeanFactoryPostProcessor可以修改BEAN的配置信息而BeanPostProcessor不能,下面举个例子说明 BEAN类: package com.spring ...
- 安装使用ubuntu和opensuse
liquid: n.液体, adj. 液体的, 流动的 liquidate: v. 清洗; 清算; 变现; 杀戮; weird: [wi2d] e:i, ir:2 离奇的,古怪的... 英文名称, 直 ...
- Python 爬虫笔记、多线程、xml解析、基础笔记（不定时更新）
1 Python学习网址:http://www.runoob.com/python/python-multithreading.html
- 2015年11月25 Java基础系列（二）Thread Runnable线程初级讲解
序,线程是比进程小的进程,非常广泛的被使用. 一.继承Thread实现线程操作 1.注意setDaemon(boolean)方法,参数为true时为守护线程,参数为false时为用户线程. 守护线程的 ...
- Android手机同步电脑端google chrome书签
我先声明:文中FQ 都是博客园自动将中文(fan qiang)转换为FQ的,并不是我本来写的就是FQ~~ 手机和电脑都必须要能登录google(Xee:几乎所有做开发的人都每天的生活都离不开谷歌了,可 ...
- Backbone☞View中的events...click事件失效
<div id="container"> <input type="button" id="test_click" val ...
- 安装cocoods
http://www.tuicool.com/articles/7VvuAr3 http://blog.csdn.net/gf771115/article/details/50403253(详细,用终 ...
- hdu1757 A Simple Math Problem
Problem Description Lele now is thinking about a simple function f(x).If x < 10 f(x) = x.If x > ...
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解（转VIII）
JVM本身就是一个java进程,一个java程序运行在一个jvm进程中.多个java程序同时运行就会有多个jvm进程.一个jvm进程有多个线程至少有一个gc线程和一个用户线程. JDK本身提供了很多方 ...
- Android三种消息提示
Android消息提示有三种方式: 1 使用Toast显示消息提示框 Toast类用于在屏幕中显示一个提示信息框,该消息提示框没有任何控制按钮,并且不会获得焦点,经过一定时间后自动消失.通常用于显示 ...