<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>网络</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
title: [
{
text: '发送'
},
{
top: '55%',
text: '接收'
}
],
tooltip: {
trigger: 'axis',
formatter: function(params){
var myDom = params[0].name + '<br />';
$.each(params, function(index, item){
myDom += item.marker + item.seriesName + ': ' + formatBytes(item.value) + '<br>';
})
return myDom;
}
},
legend: {
data: ['以太网', 'VMware Network Adapter VMnet1', 'VMware Network Adapter VMnet8'],
selected: {
'以太网': true,
'VMware Network Adapter VMnet1': true,
'VMware Network Adapter VMnet8': true,
},
},
grid: [
{
bottom: '60%'
},
{
top: '60%'
}
],
toolbox: {
feature: {
saveAsImage: {},
dataView: {
show: true,
optionToContent: function(opt){
var html = '';
$.each(opt.title, function(t_k, t_v){
html += '<p>' + t_v.text + '：</p>';
var table = '<table border=1 cellspacing=0 cellpadding=5><tbody><tr>';
table += '<th align="center">时间</th>';
$.each(opt.legend[0].data, function(l_k, l_v){
table += '<th align="center">' + l_v + '</th>';
})
table += '</tr>';
$.each(opt.xAxis[0].data, function(x_k, x_v){
table += '<tr>';
table += '<td align="center">' + x_v + '</td>';
$.each(opt.series, function(s_k, s_v){
if (s_v.xAxisIndex == t_k) {
table += '<td align="center">' + formatBytes(s_v.data[x_k]) + '</td>';
}
});
table += '</tr>';
})
table += '</tbody></table>';
html += table + '<br>';
});
return html;
}
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [
'2021/06/01 08:00:00',
'2021/06/01 08:00:03',
'2021/06/01 08:00:06',
'2021/06/01 08:00:09',
'2021/06/01 08:00:12',
]
},
{
type: 'category',
boundaryGap: false,
data: [
'2021/06/01 08:00:00',
'2021/06/01 08:00:03',
'2021/06/01 08:00:06',
'2021/06/01 08:00:09',
'2021/06/01 08:00:12',
],
gridIndex: 1
},
],
yAxis: [
{
type: 'value'
},
{
type: 'value',
gridIndex: 1
},
],
series: [
// 发送
{
name: '以太网',
type: 'line',
data: [10, 80, 300, 200, 160],
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: 'VMware Network Adapter VMnet1',
type: 'line',
data: [50, 200, 210, 60, 90],
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: 'VMware Network Adapter VMnet8',
type: 'line',
data: [80, 85, 96, 120, 200],
xAxisIndex: 0,
yAxisIndex: 0,
},
// 接收
{
name: '以太网',
type: 'line',
data: [20, 300, 700, 900, 1600],
xAxisIndex: 1,
yAxisIndex: 1,
},
{
name: 'VMware Network Adapter VMnet1',
type: 'line',
data: [800, 850, 960, 1200, 2000],
xAxisIndex: 1,
yAxisIndex: 1,
},
{
name: 'VMware Network Adapter VMnet8',
type: 'line',
data: [300, 400, 500, 600, 800],
xAxisIndex: 1,
yAxisIndex: 1,
}
]
};
myChart.setOption(option, true);
// ===================================
var legend_data = ['以太网', 'VMware Network Adapter VMnet1', 'VMware Network Adapter VMnet8'];
var xAxis_data = [];
var series = [];
var max = 50;
var time_unit = 2000;
var base = +new Date() - max * time_unit;
$.each(legend_data, function(l_k, l_v){
series.push({
name: l_v,
type: 'line',
data: [],
xAxisIndex: 0,
yAxisIndex: 0,
});
series.push({
name: l_v,
type: 'line',
data: [],
xAxisIndex: 1,
yAxisIndex: 1,
});
})
for (var i = 0; i < max; i++) {
var now = new Date(base += time_unit);
xAxis_data.push(getTime(now));
$.each(series, function(s_k, s_v){
var value = Math.round(Math.random() * 10000, 2);
series[s_k].data.push(value);
});
}
option.legend.data = legend_data;
option.xAxis[0].data = xAxis_data;
option.xAxis[1].data = xAxis_data;
option.series = series;
myChart.setOption(option, true); // 初始化
var inter = setInterval(function(){
var now = new Date(base += time_unit);
xAxis_data.shift();
xAxis_data.push(getTime(now));
$.each(series, function(s_k, s_v){
var value = Math.round(Math.random() * 10000, 2);
series[s_k].data.shift();
series[s_k].data.push(value);
});
option.legend.data = legend_data;
option.xAxis[0].data = xAxis_data;
option.xAxis[1].data = xAxis_data;
option.series = series;
myChart.setOption(option, true);
}, time_unit);
// 切换图例的选中状态
myChart.on('legendselectchanged', function(params){
option.legend.selected = params.selected;
});
function getTime(date, format){
var ymd = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/');
var hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
var minute = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
var second = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
var his = [hour, minute, second].join(':');
if (format == 'Ymd') {
return ymd;
} else if (format == 'His') {
return his;
}
return ymd + ' ' + his;
}
function formatBytes(bytes){
var Kb = 1024, Mb = 1024 << 10, Gb = 1024 << 20, Tb = 1024 << 30;
if (bytes < Kb) {
return bytes + 'bps';
} else if (bytes < Mb) {
return (bytes / Kb).toFixed(2) + 'Kbps';
} else if (bytes < Gb) {
return (bytes / Mb).toFixed(2) + 'Mbps';
} else if (bytes < Tb) {
return (bytes / Gb).toFixed(2) + 'Gbps';
}
return bytes;
}
</script>
</body>
</html>