vue2.0+echarts可視化圖形開發中遇到的問題總結


項目首頁如上圖所示:

先說說我的想法吧,此頁面共包含title,tabs(選項欄),materchart(儀表盤),loading(等待加載提示),btns(按鈕)四個組件,

1、表盤組件所用到的數據由首頁以屬性的方式傳遞,

因為數據從服務器端是異步獲取,因此直接寫入請求數據會出錯,因為在頁面渲染時異步請求未完成,所以此處加入了loading模塊,在請求的過程中顯示loading狀態,等待請求完畢時更改v-if的值,來達到異步顯示圖表的目的。

這里先簡單記錄一下自己的思路。

 

2、下面說一下首頁tab欄的實現吧

tab欄采用了vuxUI內的tab插件,然后將tab點擊事件傳遞給父組件,

傳遞:

父組件接收:

然后,在父組件內通過上述方法請求資源。

關於echarts組件圖標的更新,重新畫圖並不能執行,因為echarts采用H5的convas方法畫圖,直接調用的時候因為頁面內已存在此元素,故報錯,通過看官方文檔,我的方案是在父組件內調用圖表子組件的setOption()方法,即可實現圖表更新。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM