利用宝塔api，我们可以给博客添加实时流量监控。具体实现如下：
  • 开启宝塔API并将服务器IP地址记录在白名单

  • 修改config.php中的key和path

    最终实现效果：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
   
    .joe_census__server {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 680px;
        
    }

    .joe_census__server-item {
        background: #fff;
        box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
        border-radius: 8px;
    }

    .joe_census__server-item .title {
        display: flex;
        align-items: center;
        height: 45px;
        padding: 0 12px;
        border-bottom: 1px solid #ebeef5;
        color: #303133;
        justify-content: space-between;
        user-select: none;
    }

    .joe_census__server-item .title .count {
        color: #909399;
        font-size: 12px;
    }

    .joe_census__server-item .title .count .split {
        margin: 0 5px;
    }

    .joe_census__server-item .content {
        padding: 15px;
    }

    #work,
    #flow {
        height: 350px;
    }
</style>

<div class="joe_census__server">
    <div class="joe_census__server-item">
        <div class="title">实时负载</div>
        <div class="content">
            <div id="work"></div>
        </div>
    </div>


    <div class="joe_census__server-item">
        <div class="title">
            <span>实时流量</span>
            <div class="count">
                <span class="up">总发送：0 B</span>
                <span class="split">/</span>
                <span class="down">总接收：0 B</span>
            </div>
        </div>
        <div class="content">
            <div id="flow"></div>
        </div>
    </div>
</div>

<script>
    function bytesToSize(bytes) {
        if (!bytes) return '0 B';
        const k = 1024,
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
    };
    const categories = [];
    const upSeries = [];
    const downSeries = [];
    const flowDom = document.querySelector('#flow');
    const workDom = document.querySelector('#work');
    const flowChart = flowDom && echarts.init(flowDom);
    const workChart = workDom && echarts.init(workDom);
    if (flowDom && workDom) initChart();
    function initChart() {
        $.ajax({
            url: 'https://blog.bbskali.cn/action.php',
            dataType: 'json',
            success(res) {
                if (!res.status) alert('服务器接口异常！');
                {
                    $('.joe_census__server-item .count .up').html(`总发送：${bytesToSize(res.upTotal)}`);
                    $('.joe_census__server-item .count .down').html(`总接收：${bytesToSize(res.downTotal)}`);
                    const stamp = new Date();
                    const hours = String(stamp.getHours()).padStart(2, 0);
                    const minutes = String(stamp.getMinutes()).padStart(2, 0);
                    const seconds = String(stamp.getSeconds()).padStart(2, 0);
                    const time = `${hours}:${minutes}:${seconds}`;
                    categories.push(time);
                    upSeries.push(res.up);
                    downSeries.push(res.down);
                    if (categories.length > 5) categories.shift();
                    if (upSeries.length > 5) upSeries.shift();
                    if (downSeries.length > 5) downSeries.shift();
                    flowChart.setOption({
                        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        label: {
            backgroundColor: '#6a7985'
        }
    }
},
legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
},
toolbox: {
    feature: {
        saveAsImage: {}
    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
xAxis: [
    {
        type: 'category',
        boundaryGap: false,
        data: categories
    }
],
yAxis: [
    {
        type: 'value'
    }
],
series: [
   

    {
        name: '上行',
        type: 'line',
        stack: '总量',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 0, 135)'
            }, {
                offset: 1,
                color: 'rgba(135, 0, 157)'
            }])
        },
        emphasis: {
            focus: 'series'
        },
        data: upSeries
    },
    {
        name: '下行',
        type: 'line',
        stack: '总量',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        label: {
            show: true,
            position: 'top'
        },
        areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 191, 0)'
            }, {
                offset: 1,
                color: 'rgba(224, 62, 76)'
            }])
        },
        emphasis: {
            focus: 'series'
        },
        data: downSeries
    }
]
                        
                     
                    });
                }
               {
                    /* CPU占用 */
                    const cpuUse = res.cpu[0];
                    /* 内存占用 */
                    const memoryRealUse = Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10;
                    /* 内存缓冲 */
                    const memoryCacheUse = Math.round((res.memory.memCached / res.memory.memTotal) * 1000) / 10;
                    /* 系统缓冲 */
                    const memoryBufferUse = Math.round((res.memory.memBuffers / res.memory.memTotal) * 1000) / 10;
                    /* 系统负载 */
                    const systemLoad = Math.round((res.load.one / res.load.max) * 100) > 100 ? 100 : Math.round((res.load.one / res.load.max) * 100);
                    workChart.setOption({
                        title: {
                            subtext: '单位 百分比'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            data: ['CPU占用', '内存占用', '系统缓冲', '内存缓冲', '系统负载']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: {
                            data: [
                                {
                                    name: 'CPU占用',
                                    value: cpuUse,
                                    itemStyle: {
                                        color: '#b3c25a'
                                    }
                                },
                                {
                                    name: '内存占用',
                                    value: memoryRealUse,
                                    itemStyle: {
                                        color: '#67b580'
                                    }
                                },
                                {
                                    name: '系统缓冲',
                                    value: memoryBufferUse,
                                    itemStyle: {
                                        color: '#86ba71'
                                    }
                                },
                                {
                                    name: '内存缓冲',
                                    value: memoryCacheUse,
                                    itemStyle: {
                                        color: '#feb041'
                                    }
                                },
                                {
                                    name: '系统负载',
                                    value: systemLoad,
                                    itemStyle: {
                                        color: '#fd7e55'
                                    }
                                }
                            ],
                            type: 'bar',
                            showBackground: true,
                            label: {
                                show: true,
                                color: '#ffffff',
                                formatter: params => `${params.data.value} %`
                            },
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    });
                }
                setTimeout(initChart, 2000);
            }
        });
    }
</script>

### 源码下载

版权属于：逍遥子大表哥

本文链接：https://blog.bbskali.cn/2511.html

按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。

Kali笔记一键关注
Last modification：September 22, 2021
© Allow specification reprint
正在沿街乞讨中……