Activity Calendar
Count the number of articles and author reviews over the last 10 months
Loading...
Radar Chart
Loading...
Release Chart
Loading...
Classification Chart
Loading...
Tag Chart
Loading...
New thing
New thing
我的爱车!
February 15th, 2021 at 01:15 pm
点击查看详情
August 14th, 2020 at 06:19 pm
点击查看详情
April 24th, 2020 at 10:04 pm
文章
时光机
实时流量
Home
实时流量
Share to:
实时负载
实时流量
总发送:0 B
/
总接收:0 B
CUP状态
内存状态
Like
1
正在沿街乞讨中……
Leave a Comment
Cancel reply
请输入正确的邮箱,以便收到回复!
Comment
*
Private comment
Name
*
🎲
Email
*
Site
Leave a Comment
submitting...
实时流量
逍遥子
•
2021 年 05 月 25 日
<!DOCTYPE html> <html lang="en"> <head> <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: 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> </head> <body> <div class="joe_census__server"> <div class="joe_census__server-item"> <div class="title">实时负载</div> <div class="content"> <div id="work"></div> </div> </div> <br /> <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> <br /> <div class="joe_census__server-item"> <div class="title">CUP状态</div> <div class="content"> <div id="cpu"></div> </div> </div> <br /> <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> </body> </html>
Article Directory