0
点赞
收藏
分享

微信扫一扫

开个定时器给echarts组件配置定时更新

我在js文件中开了个定时器,每1s从后端获取数据并解析,然后用异步方法就渲染不出来,改成同步就可以了。
这个解决方法来自于这篇文章,我出的问题和他一样:​关于ajax中readyState的值一直为1的问题 这里将ajax参数修改为false即可:

xmlhttp.open("GET","http://www.test.com/getData.php?q=",false);

但是还有个问题,更改数据后还需要更新echarts组件的配置,否则页面不会动态刷新,还是静态的。
根据mychart组件使用的三部曲:

  1. 实例化对象
  2. 指定配置项和数据
  3. 把配置项给实例对象
    我们在第一次setOption之后开一个定时器,在内部更新数据,然后对于option的需要更新的参数重新赋值,然后再次调用setoption,这样数据发生改变后,我们的组件也会动态刷新了。
// 3. 把配置项给实例对象
myChart.setOption(option);

setInterval(function() {
// 读取数据库文件,更新配置
var obj= Myupdate();
if (obj != null) {
option.xAxis.data = obj.mytype;
option.series.data = obj.mydata;
myChart.setOption(option,true);
}
}, 500);

这里执行号Myupdate()函数之后,obj的mytype和mydata的值都是正确的,但是在网页端debug发现,赋值之后查看option的xAxis的data还是没有被赋值,经过翻阅相关博客,以及再次查看网页端代码发现是这个问题:

封装好的数组应该赋给:

option.xAxis[0].data = obj.mytype;
option.series[0].data = obj.mydata;

开个定时器给echarts组件配置定时更新_i++
因为这两个配置都是数组…绝了

update函数内容如下:

function Myupdate() {
var xmlhttp=new XMLHttpRequest();
var mytype = new Array();
var mydata = new Array();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var txt = xmlhttp.responseText;
// 解析
for (var i = 0; i < txt.length; i++) {
if (txt[i] == '#') {
var m_type = "";
while(i + 1 < txt.length && txt[i+1] != '$') {
i++;
m_type += txt[i];
}
mytype.push(m_type);
} else if (txt[i] == '$') {
var m_data = "";
while(i + 1 < txt.length && txt[i+1] != '@') {
i++;
m_data += txt[i];
}
mydata.push(Number(m_data));
} else {
i++;
}
}
// QualityIndexType = mytype;
// QualityIndexData = mydata;
}
}
xmlhttp.open("GET","http://www.test.com/getData.php?q=",false);
xmlhttp.send();
return {
mytype,
mydata
};
}


举报

相关推荐

0 条评论