我在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};
}