最近做echarts圖表時,因爲涉及到使用開關變量控制不同圖表的顯示隱藏,用 v-if 時會出現沒有獲取到dom結構而報錯,所以改用 v-show,但是 v-show 本身是結構已經存在,當數據發生變化時,結構並未重新渲染,所以會出現 echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況,就像下圖:
還折騰了半天,其實就是當數據請求出來後,調用繪製ehcarts時圖表的時候,用 Vue.nextTick(function () { // DOM 更新了 }) 主動觸發一下圖表,使之強制渲染就可以正常顯示了
正常顯示圖表: