实时流量

博主： literature
发布时间：2023 年 08 月 05 日
119 次浏览
关闭评论
14416字数
分类：主机教程

实时负载

实时流量

总发送：0 B
/
总接收：0 B

CUP状态

内存状态

最后修改：2023 年 08 月 04 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

实时流量

literature • 2023 年 08 月 05 日

<p><meta charset="UTF-8"><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"></p><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: 700px;
            margin: 0 auto;
            
        }

.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;
        }
        #cpu,/*定义容器*/
        #nei,
        #work,
        #flow {
            height: 400px;
        }

</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><p><br /></p><div class="joe_census__server-item"><div class="title"><span>实时流量</span></p><div class="count"><span class="up">总发送：0 B</span><br />
<span class="split">/</span><br />
<span class="down">总接收：0 B</span></div></div><div class="content"><div id="flow"></div></div></div><p><br /></p><div class="joe_census__server-item"><div class="title">CUP状态</div><div class="content"><div id="cpu"></div></div></div><p><br /></p><div class="joe_census__server-item"><div class="title">内存状态</div><div class="content"><div id="nei"></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 cpuSeries = [];/*定义CPUseries变量*/
        const neiSeries=[];
        const cpuDom = document.querySelector('#cpu');/*将图表放到容器中*/
        const neiDom = document.querySelector('#nei');
        const flowDom = document.querySelector('#flow');
        const workDom = document.querySelector('#work');
        const cpuChart = flowDom && echarts.init(cpuDom);/*定义图表的方法*/
        const neiChart = flowDom && echarts.init(neiDom);/*定义图表的方法*/
        const flowChart = flowDom && echarts.init(flowDom);
        const workChart = workDom && echarts.init(workDom);
        if (flowDom && workDom && cpuDom && neiDom) initChart();
        function initChart() {
            $.ajax({
                url: 'https://blog.bbskali.cn/action.php',
                dataType: 'json',
                success(res) {

{
                        $('.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);
                        cpuSeries.push(res.cpu[0]);/*赋值变量*/
                        neiSeries.push(Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10);
                        if (categories.length > 5) categories.shift();
                        if (upSeries.length > 5) upSeries.shift();
                        if (downSeries.length > 5) downSeries.shift();
                        if (cpuSeries.length > 5) cpuSeries.shift();/*回收变量*/
                        if (neiSeries.length > 5) neiSeries.shift();
                        flowChart.setOption({
                            title: {
                                subtext: '单位 KB/s'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            xAxis: {
                                axisTick: {
                                    show: false
                                },
                                type: 'category',
                                boundaryGap: false,
                                data: categories
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    type: 'line',
                                    name: '上行',
                                    smooth: true,
                                    showSymbol: false,
                                    itemStyle: {
                                        normal: {
                                            color: '#f39494',
                                            areaStyle: {
                                                color: '#f39494'
                                            },
                                            lineStyle: {
                                                width: 2,
                                                color: '#f39494'
                                            }
                                        }
                                    },
                                    stack: '总量',
                                    data: upSeries
                                },
                                {
                                    type: 'line',
                                    name: '下行',
                                    smooth: true,
                                    showSymbol: false,
                                    itemStyle: {
                                        normal: {
                                            color: '#9dd3e8',
                                            areaStyle: {
                                                color: '#9dd3e8'
                                            },
                                            lineStyle: {
                                                width: 2,
                                                color: '#9dd3e8'
                                            }
                                        }
                                    },
                                    stack: '总量',
                                    data: downSeries
                                }
                            ]
                        });
                        /*定义图表的方法*/
                        cpuChart.setOption({
                            color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                            title: {
                                subtext: '单位 %/s'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: categories
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    type: 'line',
                                    name: '上行',
                                    smooth: true,
                                    showSymbol: false,
                                    areaStyle: {
                                        opacity: 0.8,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(128, 255, 165)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(1, 191, 236)'
                                        }])
                                    },

stack: '状态',
                                    data: cpuSeries
                                },

]
                        });

neiChart.setOption({
                            series: [{
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 30,
                                        color: [
                                            [0.3, '#67e0e3'],
                                            [0.7, '#37a2da'],
                                            [1, '#fd666d']
                                        ]
                                    }
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto'
                                    }
                                },
                                axisTick: {
                                    distance: -30,
                                    length: 8,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 2
                                    }
                                },
                                splitLine: {
                                    distance: -30,
                                    length: 30,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 4
                                    }
                                },
                                axisLabel: {
                                    color: 'auto',
                                    distance: 40,
                                    fontSize: 20
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value} %',
                                    color: 'auto'
                                },
                                data: [{
                                    value: neiSeries
                                }]
                            }]

});
                    }
                    {
                        /* 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: '10%',
                                right: '10%',
                                bottom: '3%',
                                containLabel: true
                            },

series: {
                                data: [
                                    {value: cpuUse, name: 'CPU占用'},
                                    {value: memoryRealUse, name: '内存占用'},
                                    {value: memoryCacheUse, name: '系统缓冲'},
                                    {value: memoryBufferUse, name: '内存缓冲'},
                                    {value: systemLoad, name: '系统负载'},

],
                                type: 'pie',
                                radius: [20, 150],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },

}
                        });
                    }
                    setTimeout(initChart, 2000);
                }
            });
        }
    </script></p>

实时流量

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

狂雨小说源码（KYXSCMS）内容管理系统-主机教程

Java 反编译工具 Luyten

Kali Linux 下搭建Web环境

BitSend：一个不限容量，可设密码的免费文件存储分享平台

Linux VPS性能/网络测试综合脚本

实时流量