前台定时动态显示随机数据

10 篇文章 0 订阅
9 篇文章 0 订阅

需求是动态显示一个饼图。

(一)思路是先找一个前端类似sleep的函数直接调用,然后再传随机数字。

while(1){
    var time = Date.now();
    function sleep(d){
        while(Date.now - time <= d);
    } 
    sleep(1000);//毫秒
    option.series[0].data[0] = {value:Math.floor(Math.random() * (31 - 25) + 25), name:'成都'};
    myChart.setOption(option);  //使用刚指定的配置项和数据显示图表。
}

结果居然是进入了死循环,页面数据根本加载不出来。发现定时不能这样弄,后来查询到了,js中一般用setTimeout或者setTimeInterval实现函数的延迟执行,但是这两个方法相当于开启的新的线程进行等待,而如果我们想让代码串行的进行等待,这两个函数就实现不了了。


setInterval(displayRandom,10000);//displayRandom是回调函数
function displayRandom(){//逻辑直接在这里面填充
    option.series[0].data[0] = {value:Math.floor(Math.random() * (31 - 25) + 25), name:'成都'};
    myChart.setOption(option);  //使用刚指定的配置项和数据显示图表。
}

但是问题随之而来,数值居然不是动态变化的。

(二)如何用js刷新DIV:刷新一个DIV,而不是刷新整个页面。

<div id="div2">	            
	<div id="abc" style="width: 419px;height: 423px;"></div>
</div>

刷新一个div就是重新调用控制该div的方法(把div改变的内容封装到一个方法里面)如果需要重新加载值,一般需要先清空。 

myChart = echarts.init(document.getElementById('abc'));
for(var i=0; i<14; i++){
    option.series[0].data[i].value = Math.floor(Math.random() * 1000);
}
myChart.setOption(option);  //使用刚指定的配置项和数据显示图表。和数据显示图表。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值