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>

Summer PHP 框架

巴特西

ECharts分析xdebug跟踪日志

最新文章

热门文章