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: '磁碟使用率' }, tooltip: { trigger: 'axis', formatter: function(params){ var myDom = params[0].name + '<br />'; $.each(params,function(index, item){ myDom += item.marker + item.seriesName + ': ' + item.value + '%<br />'; }) return myDom; } }, legend: { data: ['本地磁碟(C:)', '本地磁碟(D:)', '本地磁碟(E:)'], selected: { '本地磁碟(C:)': true, '本地磁碟(D:)': true, '本地磁碟(E:)': true, }, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {}, dataView: { show: true, optionToContent: function(opt){ var table = '<table border=1 cellspacing=0 cellpadding=5><tbody><tr>' + '<th align="center">時間</th>'; $.each(opt.legend[0].data, function(index, item){ table += '<th align="center">' + item + '</th>'; }) table += '</tr>'; $.each(opt.xAxis[0].data, function(index, item){ table += '<tr>'; table += '<td align="center">' + item + '</td>'; $.each(opt.series, function(index_series, item_series){ table += '<td align="center">' + item_series.data[index] + '%</td>'; }); table += '</tr>'; }) table += '</tbody></table>'; return table; } } } }, 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', ] }, yAxis: { type: 'value' }, series: [ { name: '本地磁碟(C:)', type: 'line', data: [30, 30.33, 31, 50, 52], }, { name: '本地磁碟(D:)', type: 'line', data: [80, 83, 70, 68, 69.35], }, { name: '本地磁碟(E:)', type: 'line', data: [10, 10, 10.11, 10.24, 10.24], }, ] }; var legend_data = ['本地磁碟(C:)', '本地磁碟(D:)', '本地磁碟(E:)']; var xAxis_data = []; var series = []; var max = 50; var time_unit = 2000; var base = +new Date() - max * time_unit; $.each(legend_data, function(index, item){ series.push({ name: item, type: 'line', data: [] }); }) for (var i = 0; i < max; i++) { var now = new Date(base += time_unit); xAxis_data.push(getTime(now, 'His')); $.each(legend_data, function(index, item){ var value = Math.round(Math.random() * 100, 2); series[index].data.push(value); }); } option.legend.data = legend_data; option.xAxis.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, 'His')); $.each(legend_data, function(index, item){ var value = Math.round(Math.random() * 100, 2); series[index].data.shift(); series[index].data.push(value); }); option.legend.data = legend_data; option.xAxis.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; } </script> </body> </html>