echarts CPU利用率模拟展示
Posted 80boy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts CPU利用率模拟展示相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于echarts CPU利用率模拟展示的主要内容，如果未能解决你的问题，请参考以下文章