<!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>