1. 程式人生 > >vue2.0+echarts可視化圖形開發中遇到的問題總結

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

首頁 異步請求 自己的 點擊事件 blog -i vue 選項 set

技術分享

項目首頁如上圖所示:

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

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

技術分享

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

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

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

技術分享

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

傳遞:

技術分享

父組件接收:

技術分享

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

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

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