這個一般都是因為你在父組件請求到了 數據,然后傳給echarts 子組件所導致的問題

這個qreport 組件就是封裝 echarts 圖表的子組件,reportData 就是圖表所需數據,在父組件中onMounted 中請求獲得
其實這個bug困擾我好幾次了,也陸陸續續的去百度過原因和解決方案。 最有效的就是 v-if 判斷, 也就是 圖片中框出來的。 但是原因比較模糊,之前我認為比較合理的就是 數據請求和渲染的順序問題導致.
但是今天終於想通了, 這里其實本質是 生命周期的問題。
首先復習一下 子組件和父組件 之間生命周期的先后順序。

【圖片來自網絡】
可以看到在父組件mounted之前, 子組件已經掛載完畢, 引入情景就是 無論你封裝的 echarts子組件的渲染是放在 mounted() 還是 nextTick 中, 此時你父組件中的 mounted() 還未執行【因為我把數據請求都放在mounted中了】,所以你(我)此時渲染的 echarts是沒有數據的,或者說你傳過去的是空的數據, 就算你的options 中存在部分配置,可數據為空, 圖表就會是空白,但是 其實 你去控制台去審查元素, canvas 標簽是 有的! 【這正和我之前碰到的幾次一樣,canvas生成了, 但是是空白的畫布】

綜上: 如果 的的情況和上面所述差不多, 那么你可以 通過 v-if 去判斷, 當確實請求到數據,后再去傳給子組件后渲染圖表。
或者你也可以到 vue3 setup 中直接發請求【vue3 中 setup 所處生命周期為 beforeCreated 和 created 間, 這兩個生命周期是位於子組件之前的】 或者 在 vue2 created() {} 中去發請求, 估計可以不需要 v-if 就可以 渲染出圖表!!!【待驗證】
歡迎驗證后留言!!!
20220914更新:
直接到 vue3 setup 中直接發請求可以成功渲染,不需要v-if,只是 組件會需要使用 《suspense》 包裹
