526互联

解析jmeter数据1.0

发布时间 2023-12-13 10:59:34作者: 毛会懂

 需要提前引入 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>