
項目首頁如上圖所示:
先說說我的想法吧,此頁面共包含title,tabs(選項欄),materchart(儀表盤),loading(等待加載提示),btns(按鈕)四個組件,
1、表盤組件所用到的數據由首頁以屬性的方式傳遞,

因為數據從服務器端是異步獲取,因此直接寫入請求數據會出錯,因為在頁面渲染時異步請求未完成,所以此處加入了loading模塊,在請求的過程中顯示loading狀態,等待請求完畢時更改v-if的值,來達到異步顯示圖表的目的。
這里先簡單記錄一下自己的思路。
2、下面說一下首頁tab欄的實現吧

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

父組件接收:

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