原因是在頁面進行加載時,父容器最初是被隱藏的,寬高為0。隱藏的圖表找不到對應的div大小,所以默認給了一個大小。
解決方案一:
把寬高固定寫死,
比如style=”width:500px;height:500px”,這時候echarts有了明確的大小時候就可以正常顯示出來了。
但是如果 想要 100%鋪滿且隨屏幕自動適應大小,又無法解決了。。
解決方案二:
可以給圖表標簽加上v-if ,利用v-if 值切換來重繪圖形頁面。
解決方案三:
element UI 官方提供的 lazy="true" 延遲加載,也就是待tab頁切換時,父容器tab渲染完畢再去渲染子組件