echarts圖表使用v-show控制圖表顯示不全的問題

        最近做echarts圖表時,因爲涉及到使用開關變量控制不同圖表的顯示隱藏,用 v-if 時會出現沒有獲取到dom結構而報錯,所以改用 v-show,但是 v-show 本身是結構已經存在,當數據發生變化時,結構並未重新渲染,所以會出現 echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況,就像下圖:

 

還折騰了半天,其實就是當數據請求出來後,調用繪製ehcarts時圖表的時候,用 Vue.nextTick(function () { // DOM 更新了 }) 主動觸發一下圖表,使之強制渲染就可以正常顯示了

 

正常顯示圖表:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章