<!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> </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); var option = { title: { // 標題組件 text: 'CPU利用率' // 主標題文本 }, tooltip: { // 提示框組件 trigger: 'axis', // 觸發類型（axis： 坐標軸觸發） formatter: function (params) { // 提示框浮層內容格式器 params = params[0]; return params.axisValueLabel + '<br />' + params.marker + ' ' + params.seriesName + '<span style="font-weight: bold;float: right;">' + params.value[1] + '%</span>'; }, axisPointer: { // 坐標軸指示器配置項 animation: false // 是否開啟動畫 } }, toolbox: { // 工具欄 feature: { // 各工具配置項 saveAsImage: {}, // 保存為圖片 dataView: { // 數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新 show: true, // 是否顯示該工具 optionToContent: function(opt){ // 自定義 dataView 展現函數，用以取代默認的 textarea 使用更豐富的數據編輯。 var data = opt.series[0].data; var table = '<table border=1 cellspacing=0 cellpadding=5><tbody><tr>' + '<td align="center">時間</td>' + '<td align="center">' + opt.series[0].name + '</td>' + '</tr>'; for (var i = 0, l = data.length; i < l; i++) { table += '<tr>' + '<td align="center">' + data[i].value[0] + '</td>' + '<td align="center">' + data[i].value[1] + '%</td>' + '</tr>'; } table += '</tbody></table>'; return table; } } } }, xAxis: { // 直角坐標系 grid 中的 x 軸 type: 'time', // 坐標軸類型（time: 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。） splitLine: { // 坐標軸在 grid 區域中的分隔線 show: false // 是否顯示分隔線。默認數值軸顯示，類目軸不顯示。 } }, yAxis: { // 直角坐標系 grid 中的 y 軸 type: 'value', // 坐標軸類型（value: 數值軸，適用於連續數據。） boundaryGap: [0, '100%'], // 坐標軸兩邊留白策略 min: 0, // 坐標軸刻度最小值 max: 100, // 坐標軸刻度最大值 splitLine: { // 坐標軸在 grid 區域中的分隔線 show: false // 是否顯示分隔線。默認數值軸顯示，類目軸不顯示。 } }, series: [ { name: 'CPU利用率', // 系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。 type: 'line', showSymbol: false, // 是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示。 data: [] // 系列中的數據內容數組 } ] }; var data = []; var iMax = 100; var timeUnit = 1000; var base = +new Date() - iMax * timeUnit; for (var i = 0; i < iMax; i++) { var now = new Date(base += timeUnit); var value = Math.round(Math.random() * 100, 2); data.push({ name: now.toString(), value: [getTime(now), value] }); } option.series[0].data = data; myChart.setOption(option, true); // 初始化 var inter = setInterval(function(){ var now = new Date(base += timeUnit); var value = Math.round(Math.random() * 100, 2); data.shift(); data.push({ name: now.toString(), value: [getTime(now), value] }); option.series[0].data = data; myChart.setOption(option, true); }, timeUnit); function getTime(date){ 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(':'); return ymd + ' ' + his; } </script> </body> </html>