2015年12月23日 15:36:11 星期三

之前用的是国外的图表工具, 有点麻烦, 文档是英文的, 看着不顺眼,

发现了百度出品的ECharts, 文档比较全, 功能比较多, 做出的图也比较好看, 用起来也比较简单

先解释一下:

两个点之间上下距离相距比较大的说明这两个点之间耗费的内存比较大

两个点之间左右距离相距比较大的说明两点之间耗时比较多

单文件:

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <title>ECharts</title>
  5.  </head>
  6.  <body>
  7.  <?php
  8.  function makeData($file)
  9.  {
  10.      $fp = fopen($file, 'r');
  11.      $arrLineData = [];
  12.      $arrDetailData = [];
  13.  
  14.      while(!feof($fp)){
  15.          $row = fgets($fp);
  16.          $row = trim($row);
  17.          $arr_now = preg_split('#\s+#', $row);
  18.  
  19.          if (count($arr_now) == 5) {
  20.              // echo '<pre>';print_r($arr_now); exit();
  21.              $x = $arr_now[0]*10000; //时间消耗, 变成整数, 单位ms*10
  22.              $y = $arr_now[1]; //内存消耗, 缩小数量级, 单位KB
  23.              $arrLineData[] = [$x, $y];
  24.  
  25.              $tmp = [];
  26.              $tmp['time_used']     = $arr_now[0];
  27.              $tmp['memory_used'] = $arr_now[1];
  28.              $tmp['memory_add']     = 0;
  29.              $tmp['function']     = $arr_now[3];
  30.              $tmp['location']     = $arr_now[4];
  31.              $key = $x.'_'.$arr_now[1];
  32.              $arrDetailData[$key] = $tmp;
  33.          }
  34.      }
  35.  
  36.      return [$arrLineData, $arrDetailData];
  37.  }
  38.  
  39.  //读取xdebug trace 数据文件
  40.  $cpuData = makeData('./aaa.xt');
  41.  
  42.  ?>
  43.      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  44.      <div id="main" style="height:800px;weight:80%"></div>
  45.      <!-- ECharts单文件引入 -->
  46.      <script src="./echarts.min.js"></script>
  47.      <script type="text/javascript">
  48.      var cpuData = <?= json_encode($cpuData)?>;
  49.      var line1Name = '跟踪';
  50.  
  51.      // 基于准备好的dom，初始化echarts图表
  52.      var myChart = echarts.init(document.getElementById('main')); 
  53.  
  54.      option = {
  55.      title : {
  56.          text: 'PHP效率分析',
  57.          //subtext: '纯属虚构'
  58.      },
  59.      tooltip : {
  60.          trigger: 'axis',
  61.          axisPointer:{
  62.              show: true,
  63.              type : 'cross',
  64.              lineStyle: {
  65.                  type : 'dashed',
  66.                  width : 1
  67.              }
  68.          },
  69.          formatter : function (params) {
  70.              var x = params[0].value[0];
  71.              var y = params[0].value[1];
  72.  
  73.              var key = x+'_'+y;
  74.              var obj = cpuData[1][key];
  75.  
  76.              str = '';
  77.              str += '时间消耗: '+obj.time_used+"s<br>";
  78.              str += '内存消耗: '+obj.memory_used/1024+"KB<br>";
  79.              // str += '内存增量: '+obj.memory_add+"B<br>";
  80.              str += '函数调用: '+obj.function+"<br>";
  81.              str += '所在行: '+obj.location;
  82.              return str;
  83.  
  84.          }
  85.      },
  86.      dataZoom: {
  87.          show: true,
  88.          start : 0
  89.      },
  90.      legend: {
  91.          data:[line1Name]
  92.      },
  93.      toolbox: {
  94.          show : true,
  95.          feature : {
  96.              dataView : {show: true, readOnly: true},
  97.              restore : {show: true},
  98.              saveAsImage : {show: true}
  99.          }
  100.      },
  101.      calculable : true,
  102.      xAxis : [
  103.          {
  104.              type: 'value',
  105.              axisLine: {
  106.                  lineStyle: {
  107.                      color:'grey',
  108.                      width:1
  109.                  }
  110.              }
  111.          }
  112.      ],
  113.      yAxis : [
  114.          {
  115.              type: 'value',
  116.              axisLine: {
  117.                  lineStyle: {
  118.                      color:'grey',
  119.                      width:1
  120.                  }
  121.              }
  122.          }
  123.      ],
  124.      series : [
  125.          {
  126.              name:line1Name,
  127.              type:'line',
  128.              data:cpuData[0],
  129.          }
  130.      ]
  131.  };
  132.  
  133.          // 为echarts对象加载数据
  134.          myChart.setOption(option);
  135.      </script>
  136.  </body>
  137.  </html>

两个文件:

图注:

I/O密集型: 一次mysql的联结查询的效率分析

CPU密集型: 将联结查询分成两次简单查询, 并借助PHP计算得到最终结果的效率分析

代码:

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <title>ECharts</title>
  5.  </head>
  6.  <body>
  7.  <?php
  8.  function makeData($file)
  9.  {
  10.      $fp = fopen($file, 'r');
  11.      $arrLineData = [];
  12.      $arrDetailData = [];
  13.  
  14.      while(!feof($fp)){
  15.          $row = fgets($fp);
  16.          $row = trim($row);
  17.          $arr_now = preg_split('#\s+#', $row);
  18.  
  19.          if (count($arr_now) > 2 && is_numeric($arr_now[0])) {
  20.              $x = $arr_now[0]*10000; //时间消耗, 变成整数, 单位ms*10
  21.              $y = $arr_now[1]/1000; //内存消耗, 缩小数量级, 单位KB
  22.              $arrLineData[] = [$x, $y];
  23.  
  24.              $tmp = [];
  25.              $tmp['time_used']     = $arr_now[0];
  26.              $tmp['memory_used'] = $arr_now[1];
  27.              $tmp['memory_add']     = $arr_now[2];
  28.              $tmp['function']     = $arr_now[4];
  29.              $tmp['location']     = $arr_now[5];
  30.              $key = $x.'_'.$arr_now[1];
  31.              $arrDetailData[$key] = $tmp;
  32.          }
  33.      }
  34.  
  35.      return [$arrLineData, $arrDetailData];
  36.  }
  37.  
  38.  $cpuData = makeData('./file/trace._test_index_ab_cpu_XDEBUG_TRACE=start_trace.xt');
  39.  $ioData = makeData('./file/trace._test_index_ab_io_XDEBUG_TRACE=start_trace.xt');
  40.  
  41.  ?>
  42.      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  43.      <div id="main" style="height:400px"></div>
  44.      <!-- ECharts单文件引入 -->
  45.      <script src="./js/echarts-all.js"></script>
  46.      <script type="text/javascript">
  47.      var cpuData = <?= json_encode($cpuData)?>;
  48.      var ioData = <?= json_encode($ioData)?>;
  49.      var line1Name = 'CPU密集型';
  50.      var line2Name = 'I/O密集型';
  51.  
  52.      // 基于准备好的dom，初始化echarts图表
  53.      var myChart = echarts.init(document.getElementById('main')); 
  54.  
  55.      option = {
  56.      title : {
  57.          text: 'PHP效率分析',
  58.          //subtext: '纯属虚构'
  59.      },
  60.      tooltip : {
  61.          trigger: 'axis',
  62.          axisPointer:{
  63.              show: true,
  64.              type : 'cross',
  65.              lineStyle: {
  66.                  type : 'dashed',
  67.                  width : 1
  68.              }
  69.          },
  70.          formatter : function (params) {
  71.              var x = params.value[0];
  72.              var y = params.value[1];
  73.  
  74.              var key = x+'_'+y*1000;
  75.              if (params.seriesName == line1Name) {
  76.                  var obj = cpuData[1][key];
  77.              } else {
  78.                  var obj = ioData[1][key];
  79.              }
  80.              str = params.seriesName+': <br>';
  81.              str += '时间消耗: '+obj.time_used+"s<br>";
  82.              str += '内存消耗: '+obj.memory_used/1024+"KB<br>";
  83.              str += '内存增量: '+obj.memory_add+"B<br>";
  84.              str += '函数调用: '+obj.function+"<br>";
  85.              str += '所在行: '+obj.location;
  86.              return str;
  87.          }
  88.      },
  89.      dataZoom: {
  90.          show: true,
  91.          start : 0
  92.      },
  93.      legend: {
  94.          data:[line1Name, line2Name]
  95.      },
  96.      toolbox: {
  97.          show : true,
  98.          feature : {
  99.              dataView : {show: true, readOnly: true},
  100.              restore : {show: true},
  101.              saveAsImage : {show: true}
  102.          }
  103.      },
  104.      calculable : true,
  105.      xAxis : [
  106.          {
  107.              type: 'value',
  108.              axisLine: {
  109.                  lineStyle: {
  110.                      color:'grey',
  111.                      width:1
  112.                  }
  113.              }
  114.          }
  115.      ],
  116.      yAxis : [
  117.          {
  118.              type: 'value',
  119.              axisLine: {
  120.                  lineStyle: {
  121.                      color:'grey',
  122.                      width:1
  123.                  }
  124.              }
  125.          }
  126.      ],
  127.      series : [
  128.          {
  129.              name:line1Name,
  130.              type:'line',
  131.              data:cpuData[0],
  132.          },
  133.          {
  134.              name:line2Name,
  135.              type:'line',
  136.              data:ioData[0]
  137.          }
  138.      ]
  139.  };
  140.  
  141.          // 为echarts对象加载数据
  142.          myChart.setOption(option);
  143.      </script>
  144.  </body>
  145.  </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. Web 安全测试

    http://blog.sina.com.cn/s/blog_a1bbddc70101dt12.html http://blog.csdn.net/pdn2000/article/details/64 ...

  2. Subversion命令汇总

    转自:http://www.cnblogs.com/cnblogsfans/archive/2010/03/21/1690838.html svn 命令共同的选项 --targets list 读取l ...

  3. C/C++使用HTTP协议上传

    上传文件: http://zengrong.net/post/2088.htm #include <stdio.h> #include <string.h> #include ...

  4. Linux 中常见的命令行，持续更新

    1.添加自己的环境变量 root@adonis:~# echo $PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin r ...

  5. SQL获取日期格式

    ) + ' ' + CONVERT(VARCHAR, DATEPART(hh, GetDate())) + ':' + ) AS Date ),) ),) ),) as DateTime) as [D ...

  6. 【C语言入门教程】2.3 整型数据

    没有小数位或指数的数据类型被称为整型数据,根据使用方法的分类,整型数据可分为整型常量和整型变量.根据定义或显示的数制分类,可分为十进制.八进制和十六进制. 2.3.1 整型常量 整型常量是在运算中不可 ...

  7. XH

    1.  又到父亲节,那就给老爹做顿饭呗,让他开心开心. 老爸吃了一口我炒的菜,流露出感动的泪花说:儿呀,你能为爸爸做饭,爸爸感到特别开心,但是你这个菜,看在今天是父亲节 我能不能不吃呀! 2.  一哥 ...

  8. centos systemctl指令

    # systemctl #输出已激活单元 # systemctl list-units #输出已激活单元 # systemctl --failed #输出运行失败的单元 # systemctl lis ...

  9. BZOJ1901——Zju2112 Dynamic Rankings

    1.题目大意:区间第k小,有单点修改 2.分析:这个是树状数组套线段树,也是主席树....为什么主席树这么多QAQ 就是树套树的那种插入什么的,注意啊,一定要动态开内存..不然会爆.. 然后算答案有两 ...

  10. [BZOJ4016][FJOI2014]最短路径树问题

    [BZOJ4016][FJOI2014]最短路径树问题 试题描述 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择总长度最短的路径走.若有多条长 ...