<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]); } }) } 
 
 



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

  

 推荐课程





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






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






趣味Java入门教程
 编程语言￥99.00






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






斯斯超自然光腿神器
 斯斯￥888.00






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






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






JavaScript入门全套课程
 前端开发￥99.00


 



 推荐文章

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

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

Everything软件基于名称快速定位文件和文件夹
 电脑Windows免费软件 568

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

JavaScript 前端开发
 技术分享 573

Django 与Ajax实现数据交互
 技术分享 560

Python 基础知识总结(精简笔记)
 技术分享 397

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