ECharts分析xdebug跟蹤日誌

時間 2019-11-17

標籤 echarts 分析 xdebug 跟蹤日誌欄目 Java 简体版

原文原文鏈接

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

以前用的是國外的圖表工具, 有點麻煩, 文檔是英文的, 看着不順眼,php

發現了百度出品的ECharts, 文檔比較全, 功能比較多, 作出的圖也比較好看, 用起來也比較簡單html

先解釋一下:java

兩個點之間上下距離相距比較大的說明這兩個點之間耗費的內存比較大mysql

兩個點之間左右距離相距比較大的說明兩點之間耗時比較多git

單文件:sql

  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         
 20         if (count($arr_now) == 5) {
 21             // echo '<pre>';print_r($arr_now); exit();
 22             $x = $arr_now[0]*10000; //時間消耗, 變成整數, 單位ms*10
 23             $y = $arr_now[1]; //內存消耗, 縮小數量級, 單位KB
 24             $arrLineData[] = [$x, $y];
 25             
 26             $tmp = [];
 27             $tmp['time_used']     = $arr_now[0];
 28             $tmp['memory_used'] = $arr_now[1];
 29             $tmp['memory_add']     = 0;
 30             $tmp['function']     = $arr_now[3];
 31             $tmp['location']     = $arr_now[4];
 32             $key = $x.'_'.$arr_now[1];
 33             $arrDetailData[$key] = $tmp;
 34         }
 35     }
 36     
 37     return [$arrLineData, $arrDetailData];
 38 }
 39 
 40 //讀取xdebug trace 數據文件
 41 $cpuData = makeData('./aaa.xt');
 42 
 43 ?>
 44     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 45     <div id="main" style="height:800px;weight:80%"></div>
 46     <!-- ECharts單文件引入 -->
 47     <script src="./echarts.min.js"></script>
 48     <script type="text/javascript">
 49     var cpuData = <?= json_encode($cpuData)?>;
 50     var line1Name = '跟蹤';
 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[0].value[0];
 72             var y = params[0].value[1];
 73             
 74             var key = x+'_'+y;
 75             var obj = cpuData[1][key];
 76             
 77             str = '';
 78             str += '時間消耗: '+obj.time_used+"s<br>";
 79             str += '內存消耗: '+obj.memory_used/1024+"KB<br>";
 80             // str += '內存增量: '+obj.memory_add+"B<br>";
 81             str += '函數調用: '+obj.function+"<br>";
 82             str += '所在行: '+obj.location;
 83             return str;
 84             
 85         }
 86     },
 87     dataZoom: {
 88         show: true,
 89         start : 0
 90     },
 91     legend: {
 92         data:[line1Name]
 93     },
 94     toolbox: {
 95         show : true,
 96         feature : {
 97             dataView : {show: true, readOnly: true},
 98             restore : {show: true},
 99             saveAsImage : {show: true}
100         }
101     },
102     calculable : true,
103     xAxis : [
104         {
105             type: 'value',
106             axisLine: {
107                 lineStyle: {
108                     color:'grey',
109                     width:1
110                 }
111             }
112         }
113     ],
114     yAxis : [
115         {
116             type: 'value',
117             axisLine: {
118                 lineStyle: {
119                     color:'grey',
120                     width:1
121                 }
122             }
123         }
124     ],
125     series : [
126         {
127             name:line1Name,
128             type:'line',
129             data:cpuData[0],
130         }
131     ]
132 };
133 
134         // 爲echarts對象加載數據 
135         myChart.setOption(option); 
136     </script>
137 </body>
138 </html>

View Code

兩個文件:json

圖注: echarts

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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。