前端开启自动刷新功能

场景

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

 

使用语言框架

thinkphp ，layui，echarts

 

页面效果

 

 

相关代码

html代码

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

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

js代码

     //-----------CPU使用情况------------//
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('speedChartMain'));
    option = {
    tooltip: {
        trigger: 'axis',
        formatter: function( params ) {
            return params[0].data+"%";
        }
    },
    toolbox: {
        show: false,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0s', '5s', '10s', '15s', '20s', '25s', '30s', '35s','40s', '45s', '50s', '55s', '60s']
    },
    yAxis: {
        max:100,
        type: 'value',
        axisLabel: {
            formatter: '{value}%'
        }
    },
    series: [
        {
            name: 'CPU使用情况',
            type: 'line',
            itemStyle: {normal: {areaStyle: {color: '#b7d5df'}}},
            data: []
        }
    ]
    };
　　　　// 使用刚指定的配置项和数据显示图表。 
　　　　myChart.setOption(option)；

//定义定时器变量
    var timercpu
    //获取CPU利用率
    function cpuInfo(_autoFresh){
         $.ajax({
            url:"__CONTROLLER__/ajaxCpuinfo?random="+Math.random(),
            type: 'post',
            dataType: 'json',
            success:function(data){
                // 填入数据
                myChart.setOption({
                        series: [{
                            data: data.data
                        }]
                });                        
            }
         });
         if(_autoFresh === true){
            if(timercpu)
                   clearTimeout(timercpu)  
                   //每一秒中重新加载cpuInfo()方法      
                  timercpu = setTimeout(function(){
                      cpuInfo(true);
                  },5000);
         } 
    }

  layui.use(['form','element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form();
        form.on('checkbox(autoFresh)', function (data) {
            if(data.elem.checked === true){
                cpuInfo(true);
            }else{
                clearTimeout(timercpu);
            }
        });
    });