2015年12月23日 15:36:11 星期三
之前用的是国外的图表工具, 有点麻烦, 文档是英文的, 看着不顺眼,
发现了百度出品的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>
