前端开启自动刷新功能

场景

页面有一个折线图显示当前CPU利用率，需要有一个开关控制，是否每隔几秒刷新一次，查看CPU利用率的波动状态

使用语言框架

thinkphp ，layui，echarts

页面效果

相关代码

html代码

1 <div class="layui-form-item" >
2   <div class="layui-input-block" style="margin-left:80px;">
3       <input type="checkbox" name="autoFresh" id="autoFresh" lay-skin="primary" title="自动刷新" lay-filter="autoFresh">
4   </div>
5 </div>

1 <div class="layui-form-item">
2     <div id="speedChart" style="width:50%;text-align:center;float: left" class="layui-col-xs12 layui-col-sm6 layui-col-md6">
3         <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
4         <div id="speedChartMain" style="height: 300px;"></div>
5         <label>CPU利用率（最近1分钟）</label>
6     </div>
7 </div>

js代码

 1      //-----------CPU使用情况------------//
 2     // 基于准备好的dom，初始化echarts实例
 3     var myChart = echarts.init(document.getElementById(\'speedChartMain\'));
 4     option = {
 5     tooltip: {
 6         trigger: \'axis\',
 7         formatter: function( params ) {
 8             return params[0].data+"%";
 9         }
10     },
11     toolbox: {
12         show: false,
13         feature: {
14             saveAsImage: {}
15         }
16     },
17     xAxis: {
18         type: \'category\',
19         boundaryGap: false,
20         data: [\'0s\', \'5s\', \'10s\', \'15s\', \'20s\', \'25s\', \'30s\', \'35s\',\'40s\', \'45s\', \'50s\', \'55s\', \'60s\']
21     },
22     yAxis: {
23         max:100,
24         type: \'value\',
25         axisLabel: {
26             formatter: \'{value}%\'
27         }
28     },
29     series: [
30         {
31             name: \'CPU使用情况\',
32             type: \'line\',
33             itemStyle: {normal: {areaStyle: {color: \'#b7d5df\'}}},
34             data: []
35         }
36     ]
37     };
　　　　// 使用刚指定的配置项和数据显示图表。 
　　　　myChart.setOption(option)；

 1 //定义定时器变量
 2     var timercpu
 3     //获取CPU利用率
 4     function cpuInfo(_autoFresh){
 5          $.ajax({
 6             url:"__CONTROLLER__/ajaxCpuinfo?random="+Math.random(),
 7             type: \'post\',
 8             dataType: \'json\',
 9             success:function(data){
10                 // 填入数据
11                 myChart.setOption({
12                         series: [{
13                             data: data.data
14                         }]
15                 });                        
16             }
17          });
18          if(_autoFresh === true){
19             if(timercpu)
20                    clearTimeout(timercpu)  
21                    //每一秒中重新加载cpuInfo()方法      
22                   timercpu = setTimeout(function(){
23                       cpuInfo(true);
24                   },5000);
25          } 
26     }

 1   layui.use([\'form\',\'element\', \'layer\'], function () {
 2         var element = layui.element;
 3         var layer = layui.layer;
 4         var form = layui.form();
 5         form.on(\'checkbox(autoFresh)\', function (data) {
 6             if(data.elem.checked === true){
 7                 cpuInfo(true);
 8             }else{
 9                 clearTimeout(timercpu);
10             }
11         });
12     });