echarts模擬展示網路傳送接收資料量
阿新 • • 發佈：2021-06-13
<!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/[email protected]/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>