<p class="ShowList"> <form action="/_ajax/" method="post" id="myForm"> <p>主机地址: <input type="text" name="address" placeholder="输入主机IP地址"> <div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;"> <script type="text/javascript" charset="UTF-8"> var create_graphical = function(time,cpu){ var myChart_cpu = echarts.init(document.getElementById('main')); myChart_cpu.setOption({ tooltip: {}, xAxis: { data: [] }, yAxis: {}, series: [{ name: 'cpu', type: 'line', data: [] }] }); // 下方就是给指定字段填充数据 myChart_cpu.setOption({ xAxis: { data: time }, series: [{ name: 'cpu', data: cpu }] }); };  <script type="text/javascript"> $("#btn").click(function(){ $.ajax({ url: "./_ajax/", type: "POST", data: $("#myForm").serialize(), success:function (data) { var data = JSON.parse(data); create_graphical(data.status,data.status) } }) })  <div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"> <script type="text/javascript" charset="UTF-8"> var display = function(time,cpu) { var main = echarts.init(document.getElementById(("main"))); var option = { xAxis: { boundaryGap:false, boundaryGap:false, type: 'category', data: time }, yAxis: { type: 'value' }, series: [{ type: 'line', areaStyle:{}, data: cpu }] }; main.setOption(option,true); };  <script type="text/javascript" charset="UTF-8"> // 负责对参数的解析 var time =["","","","","","","","","",""]; var cpu = [0,0,0,0,0,0,0,0,0,0]; var update = function(recv){ time.push(recv.response[0]); cpu.push(parseFloat(recv.response[1])); if(time.length >=10){ time.shift(); cpu.shift(); console.log("处理后的时间数据:" + time); console.log("处理后的CPU数据:" + cpu); display(time,cpu) // 调用绘图函数 } };  <script type="text/javascript"> $( function () { fetchData(); setInterval(fetchData, 1000); } ); function fetchData(){ $.ajax({ url:"/_ajax/", type:"GET", dataType: 'json', success:function (recv) { console.log("获取到时间:" + recv.response[0]); console.log("获取到数据:" + recv.response[1]); update(recv) // 传递给处理函数 } }) }  <script type="text/javascript" charset="UTF-8"> var display = function(cpu,mem) { var cpuChart = echarts.init(document.getElementById("cpuChart")); var option = { series: [ { type: 'gauge', detail: {formatter: '{value}%'}, data: [{value: cpu, name: 'CPU'}] } ] };cpuChart.setOption(option, true); var memChart = echarts.init(document.getElementById("memChart")); var option = { series: [ { type: 'gauge', detail: {formatter: '{value}%'}, data: [{value: mem, name: 'Mem'}] } ] };memChart.setOption(option, true); };  <script type="text/javascript"> $( function () { fetchData(); setInterval(fetchData, 500); } ); function fetchData(){ $.ajax({ url:"/_ajax/", type:"GET", dataType: 'json', success:function (recv) { display(recv.response[0],recv.response[1]); } }) } 
 
 



    电脑软件 技术教程 电子图书 安卓软件 其他 

  

 推荐课程





Web前端,从零基础到全栈工程师
 前端开发￥699.00






前端工程师零基础转行就业入门班
 前端开发￥599.00






Swift语言入门
 移动开发￥0.00






Go语言/Golang小白到大神逆袭班
 后端开发￥0.00






Python零基础入门高薪必看动画课
 编程语言￥99.00






ThinkPHP5双语企业网站项目实战
 后端开发￥99.00






52ABPASP.NET Core与Angular开发
 后端开发￥99.00






用Python自动办公，做职场高手
 编程语言￥599.00


 



 推荐文章

【网络建站步骤分享】
 技术分享 1885

JavaScript 前端开发
 技术分享 555

python习题,关于python基础强化练习
 技术分享 554

HBuilderX编辑器，是轻如编辑器、强如IDE的合体版本
 电脑Windows免费软件 1079

像这样操作 Python 列表，能让你的代码更优雅，哈哈哈
 技术分享 937

JQuery 前端开发笔记
 技术分享 729

vue 快速入门 系列
 技术分享 1218

解除 网课失去焦点/离开页面 就自动暂停 的限制
 技术分享 1318