给Typecho添加实时流量监控

博主： literature
发布时间：2021 年 05 月 25 日
120 次浏览
关闭评论
9059字数
分类：主机教程

开启宝塔API并将服务器IP地址记录在白名单
修改config.php中的key和path
最终实现效果：


    实时负载

    实时流量
总发送：0 B

/

总接收：0 B

### 源码下载

版权属于：逍遥子大表哥

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

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

最后修改：2023 年 08 月 04 日

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

此处评论已关闭

给Typecho添加实时流量监控

literature • 2021 年 05 月 25 日

<ul>
 <li>开启宝塔API并将服务器IP地址记录在白名单</li>
 <li><p>修改config.php中的key和path</p><h4>最终实现效果：</h4></li>
</ul><p></p><pre><code><meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

.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></code></pre><p></p><p></p><pre><code><div:0029 class="joe_census__server">
    <div class="joe_census__server-item"><div class="title">实时负载</div><div class="content"><div id="work"></div></div></div></code></pre><p><br /></p><pre><code>    <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>
</div:0029>

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></code></pre><p></p><p></p><p>### 源码下载</p><button class=" btn m-b-xs btn-info btn-addon" onclick="window.open("https://blog.bbskali.cn/usr/uploads/2021/05/3003262228.zip","_blank")"><i class="glyphicon glyphicon-hdd"></i>Typecho宝塔实时流量</button><p><hr class="content-copyright" style="margin-top:50px"></p><div class="post-copyright" style="font-style:normal"><p class="iconfont-copyright"><i class="glyphicon glyphicon-copyright-mark"></i></p><p class="content-copyright">版权属于：逍遥子大表哥</p><p class="content-copyright">本文链接：https://blog.bbskali.cn/2511.html</p><p class="content-copyright">按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。</p></div>

给Typecho添加实时流量监控

最终实现效果：

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

欢迎使用 Typecho

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

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

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

typecho文章内挂载B站视频

宝塔面板1分钱可购买3年的异常监控推送和小程序插件

支付宝当面付填坑记

助你重新打开对短视频的认知

放大招了，懒设计永久VIP免费领！

给Typecho添加实时流量监控