我在js文件中开了个定时器,每1s从后端获取数据并解析,然后用异步方法就渲染不出来,改成同步就可以了。
这个解决方法来自于这篇文章,我出的问题和他一样:关于ajax中readyState的值一直为1的问题
这里将ajax参数修改为false即可:
xmlhttp.open("GET","http://www.test.com/getData.php?q=",false);
但是还有个问题,更改数据后还需要更新echarts组件的配置,否则页面不会动态刷新,还是静态的。
根据mychart组件使用的三部曲:
- 实例化对象
- 指定配置项和数据
- 把配置项给实例对象
我们在第一次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;
因为这两个配置都是数组…绝了
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};
}