API请求响应统计 echarts 折线配置项内容和展示

API请求响应统计

      // 颜色var '#915872', '#3077b7', '#9a8169', '#3f8797','#00BB00'
//时间
var APIXTxt = ['15:01','15:02','15:03','15:04','15:05','15:06','15:07','15:08','15:09','15:10','15:11','15:12','15:13','15:14','15:15','15:16','15:17','15:18','15:19','15:20','15:21','15:22','15:23','15:24','15:25','15:26','15:27','15:28','15:29','15:30','15:31','15:32','15:33','15:34','15:35','15:36','15:37','15:38','15:39','15:40','15:41','15:42','15:43','15:44','15:45','15:46','15:47','15:48','15:49','15:50','15:51','15:52','15:53','15:54','15:55','15:56','15:57','15:58','15:59','16:00'];
//总请求数 
var requests = [11611,15393,12525,12670,15408,14514,10517,9624,10500,11822,10460,13223,13729,12383,11165,11245,10408,12739,14784,9980,14784,15232,14910,12816,14491,9767,12709,11317,13466,9866,14929,13317,10704,11467,12595,13165,11454,14724,14870,14666,10827,13847,15036,11861,15248,12118,11042,10393,14218,13854,10875,12547,15163,10411,12239,13356,14945,13795,9878,14327];
//命中数
var hitCounts = [12202,10387,9141,12286,13582,14728,11286,14973,12759,10065,11732,9559,11391,14654,9169,14750,14413,12593,10557,12313,9572,10610,9988,11562,12155,12503,10685,14146,12339,9937,9796,9430,9906,14647,12828,14446,10485,13117,11168,9943,9797,14338,14830,14612,10285,10159,9662,14435,11360,11411,12799,9139,10005,12653,13733,11785,10685,12970,11833,14976];
// success
var success = [12044,9972,8888,12002,13303,14534,11009,14946,12479,10016,11288,9544,11253,14531,8854,14728,14003,12406,10480,12114,9483,10151,9878,11180,11870,12387,10658,14085,11957,9807,9505,9226,9802,14268,12409,14369,10194,12953,10859,9774,9407,14158,14505,14602,10254,9766,9339,14390,11221,10985,12747,8833,9846,12163,13701,11577,10550,12822,11823,14667];
//失败数
var failNum = [158,415,253,284,279,194,277,27,280,49,444,15,138,123,315,22,410,187,77,199,89,459,110,382,285,116,27,61,382,130,291,204,104,379,419,77,291,164,309,169,390,180,3,10,31,393,323,45,139,426,52,306,159,490,32,208,135,148,10,309];

//命中成功率
var hitRate = [66.10,65.06,79.43,92.80,76.44,62.25,79.37,56.56,57.15,59.22,94.47,86.61,95.12,93.53,123.26,116.02,73.29,73.01,64.83,54.14,53.60,103.90,96.28,81.91,95.29,94.21,103.30,91.62,69.70,49.79,82.70,112.65,82.88,85.95,99.08,113.37,81.89,66.94,113.52,78.65,66.84,141.01,63.05,66.06,87.09,62.55,71.42,74.94,117.24,73.06,74.25,123.38,53.94,102.21,107.96,91.70,68.29,56.17,71.41,66.93];
//查询成功率
var successRate = [96.21,98.05,97.50,98.86,99.90,95.27,99.16,98.36,98.70,98.96,97.52,98.70,98.21,99.26,96.51,97.82,97.85,97.35,99.50,98.73,97.35,98.02,96.34,96.40,97.68,98.51,95.75,97.75,98.26,99.07,98.50,98.34,99.92,96.41,98.65,97.27,98.78,99.21,97.93,98.57,95.70,96.81,98.39,98.31,98.14,98.41,98.59,96.94,99.81,98.45,98.19,99.69,95.08,97.35,97.62,98.60,99.89,98.36,98.57,98.11];


options = [{
    title: {
        text: 'API请求响应统计 '
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        containLabel: true
    },
    legend: {
        data: ['总请求数','命中数','SUCCESS','FAIL','命中成功率','查询成功率']
        ,selected: {
            '命中成功率':false,
            '查询成功率':false
        }
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            alignWithLabel: true
        },
        data: APIXTxt
    }],
    yAxis: [
        {
        type: 'value',
        name: '请求数量',
        position: 'left'
    },{
        type: 'value',
        name: '成功率',
        min: 0,
        position: 'right',
        axisLabel: {
            formatter: '{value} %'
        }
    }],
    series: [{
        name: '总请求数',
        type: 'line',
        lineStyle: {
                normal: {
                    color: '#1E9FFF',
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
        data: requests
    },{
        name: '命中数',
        type: 'line',
        lineStyle: {
                normal: {
                    color: '#009688',
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
        data: hitCounts
    },{
        name: 'SUCCESS',
        type: 'line',
        lineStyle: {
                normal: {
                    color: '#228B22',
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
        data: success
    },{
        name: 'FAIL',
        type: 'line',
        lineStyle: {
                normal: {
                    color: '#FF5722',
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
        data:failNum
    }, {
        name: '命中成功率',
        type: 'bar',
        yAxisIndex: 1,
        lineStyle: {
           normal: {
               color: '#3077b7'
           } 
        },
        data:hitRate
    }, {
        name: '查询成功率',
        type: 'bar',
        yAxisIndex: 1,
        lineStyle: {
           normal: {
               color: '#3f8797'
           } 
        },
        data:successRate
    }]
}]
;