HttpProxy/index.html at master · bearlly/HttpProxy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谁在跑流量</title>
    <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height: 800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '网卡网速|KB/s'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ["ens3:入","ens3:出"]
        },
        toolbox: {
            feature: {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176","177","178","179","180"]
        },
        yAxis: {
            type: "value"
        },
        series: [{"data":[1718.0,708.0,17.0,989.0,3817.0,1532.0,16.0,4094.0,418.0,16.0,0.0,19.0,632.0,3878.0,0.0,0.0,3.0,0.0,4486.0,0.0,6.0,4007.0,498.0,1087.0,3354.0,59.0,4498.0,343.0,2087.0,2788.0,2552.0,1258.0,1658.0,2530.0,2586.0,2213.0,2559.0,1725.0,1901.0,1861.0,2630.0,1922.0,1646.0,2079.0,4101.0,2012.0,1428.0,1294.0,990.0,1289.0,320.0,2396.0,2148.0,2407.0,2321.0,2450.0,2081.0,3510.0,3675.0,4082.0,3171.0,2633.0,3149.0,2927.0,2492.0,2004.0,4038.0,458.0,3364.0,1161.0,958.0,3590.0,180.0,4327.0,3327.0,1519.0,798.0,3700.0,0.0,4295.0,212.0,2832.0,4729.0,487.0,0.0,2798.0,4453.0,2848.0,1651.0,629.0,1271.0,1480.0,1107.0,3341.0,1799.0,1155.0,649.0,1396.0,2707.0,2166.0,1349.0,3027.0,3601.0,5349.0,4639.0,2623.0,1872.0,1.0,2753.0,4489.0,5.0,2679.0,1800.0,2287.0,1845.0,2265.0,953.0,274.0,238.0,170.0,1667.0,1711.0,1424.0,460.0,2120.0,4810.0,5401.0,5470.0,4526.0,3924.0,3617.0,3766.0,4563.0,4883.0,2714.0,1567.0,3361.0,723.0,3800.0,3.0,3547.0,2323.0,2098.0,1945.0,2620.0,922.0,3584.0,0.0,3430.0,3758.0,1830.0,924.0,3583.0,7.0,4373.0,138.0,4837.0,4232.0,2.0,3359.0,1130.0,5.0,4537.0,3817.0,747.0,1362.0,3138.0,776.0,3721.0,21.0,4257.0,2763.0,2154.0,3275.0,18.0,4821.0,6.0,3929.0,561.0,1183.0],"markLine":{"data":[{"type":"average","name":"平均值"}]},"markPoint":{"data":[{"type":"max","name":"最大值"}]},"name":"ens3:出","smooth":false,"type":"line"}]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>