需要提前引入 echarts.js 和 jquery。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.4.1.min.js"></script> <script src="echarts.js"></script> </head> <body> 从倒数第二行 Active开始复制,例如：Active: 0 Started: 900 Finished: 900 summary = 414595 in 00:13:53 = 497.5/s Avg: 315 Min: 3 Max: 3399 Err: 0 (0.00%) <textarea id="msg1" placeholder="待解析的字符串1" style="width: 1500px;height: 45px" ></textarea> <textarea id="msg2" placeholder="待解析的字符串2" style="width: 1500px;height: 45px" ></textarea> <textarea id="msg3" placeholder="待解析的字符串3" style="width: 1500px;height: 45px" ></textarea> <textarea id="msg4" placeholder="待解析的字符串4" style="width: 1500px;height: 45px" ></textarea> <textarea id="msg5" placeholder="待解析的字符串5" style="width: 1500px;height: 45px" ></textarea> <textarea id="msg6" placeholder="待解析的字符串6" style="width: 1500px;height: 45px" ></textarea> <br> <input type="button" onclick="send()" value="解析" > <br> <br> <div id="product2" style="width: 40%;height: 300px;"></div><!--折线图容器--> <div id="product3" style="width: 40%;height: 300px;"></div><!--折线图容器--> <script> //点击按钮发送消息 function send() { // 取第一个数据 var line_1 = $("#msg1").val(); line_1 = line_1.replace("summary = ","summary:"); console.log("第一行: "+ line_1); var line_1_key_1 = getNum(line_1,"Started: "," "); console.log(line_1_key_1); // TPS var line_1_val_1 = getNum(line_1," = ","/s Avg"); console.log(line_1_val_1); // 平均响应时间 var line_1_val_2 = getNum(line_1,"Avg: "," Min:"); console.log(line_1_val_2); // 取第二个数据 var line_2 = $("#msg2").val(); line_2 = line_2.replace("summary = ","summary:"); console.log("第二行: "+ line_2); var line_2_key_1 = getNum(line_2,"Started: "," "); console.log(line_2_key_1); var line_2_val_1 = getNum(line_2," = ","/s Avg"); console.log(line_2_val_1); var line_2_val_2 = getNum(line_2,"Avg: "," Min:"); console.log(line_2_val_2); // 取第三个数据 var line_3 = $("#msg3").val(); console.log("第三行: "+ line_3); line_3 = line_3.replace("summary = ","summary:"); var line_3_key_1 = getNum(line_3,"Started: "," "); console.log(line_3_key_1); var line_3_val_1 = getNum(line_3," = ","/s Avg"); console.log(line_3_val_1); var line_3_val_2 = getNum(line_3,"Avg: "," Min:"); console.log(line_3_val_2); // 取第四个数据 var line_4 = $("#msg4").val(); console.log("第四行: "+ line_4); line_4 = line_4.replace("summary = ","summary:"); var line_4_key_1 = getNum(line_4,"Started: "," "); console.log(line_4_key_1); var line_4_val_1 = getNum(line_4," = ","/s Avg"); console.log(line_4_val_1); var line_4_val_2 = getNum(line_4,"Avg: "," Min:"); console.log(line_4_val_2); // 取第五个数据 var line_5 = $("#msg5").val(); console.log("第五行: "+ line_5); line_5 = line_5.replace("summary = ","summary:"); var line_5_key_1 = getNum(line_5,"Started: "," "); console.log(line_5_key_1); var line_5_val_1 = getNum(line_5," = ","/s Avg"); console.log(line_5_val_1); var line_5_val_2 = getNum(line_5,"Avg: "," Min:"); console.log(line_5_val_2); // 取第六个数据 var line_6 = $("#msg6").val(); console.log("第六行: "+ line_5); line_6 = line_6.replace("summary = ","summary:"); var line_6_key_1 = getNum(line_6,"Started: "," "); console.log(line_6_key_1); var line_6_val_1 = getNum(line_6," = ","/s Avg"); console.log(line_6_val_1); var line_6_val_2 = getNum(line_6,"Avg: "," Min:"); console.log(line_6_val_2); var keys = [line_1_key_1,line_2_key_1,line_3_key_1,line_4_key_1,line_5_key_1,line_6_key_1]; var datalist1 = [line_1_val_1,line_2_val_1,line_3_val_1,line_4_val_1,line_5_val_1,line_6_val_1]; var datalist2 = [line_1_val_2,line_2_val_2,line_3_val_2,line_4_val_2,line_5_val_2,line_6_val_2]; var productChart2 = echarts.init(document.getElementById('product2')); exe(productChart2,datalist1,keys,"每秒用户数增加，TPS趋势图",'TPS'); var productChart3 = echarts.init(document.getElementById('product3')); exe(productChart3,datalist2,keys,"每秒用户数增加，响应时间趋势图",'响应时间'); } function getNum(str,firstStr,secondStr){ if(str == "" || str == null || str == undefined){ // "",null,undefined return ""; } if(str.indexOf(firstStr)<0){ return ""; } var subFirstStr=str.substring(str.indexOf(firstStr)+firstStr.length,str.length); var subSecondStr=subFirstStr.substring(0,subFirstStr.indexOf(secondStr)); return subSecondStr; } function exe(productChart3,datalist,keys,defineTitle,defineName){ /* * 折线图 按年份分析产品的数量 */ // 基于准备好的dom，初始化echarts实例 //假设datalist是我们从后台获取到得数据 // 指定图表的配置项和数据 var option3 = { dataZoom: [ { type: 'inside', start:0, end:100 }, { show: false, yAxisIndex: 0, width: 20, height: '80%', showDataShadow: false, left: '98%', }, { show: false, xAxisIndex: 0, height: 20, showDataShadow: false, top:'95%', } ] , title:{ text: defineTitle }, legend:{ data:[defineName], x: 'right', y: 'top' }, xAxis:{ data:keys }, yAxis:{}, series:[ { name:defineName, type:'line', itemStyle:{ normal:{ color: "#c3f" } //坐标圆点的颜色 }, lineStyle:{ normal:{ width:2,color: "#c3f" }//线条的颜色及宽度 }, label: {//线条上的数字提示信息 normal: { show: true, position: 'top' } }, smooth: true,//线条平滑 //data为每年apple的数量 data: datalist } ] }; // 使用刚指定的配置项和数据显示图表。 productChart3.setOption(option3); window.onresize = function(){ productChart3.resize();//使图表适应 }; } </script> </body> </html>
