解決 Vue3 中路由切換到其他頁面再切換回來時 Echarts 圖表不顯示的問題

問題復現：

正常狀態下：

切換到其他頁面再切換回來：

問題解決：

其實這個問題的解決方式官網寫得清清楚楚，我們看看官網怎麼解決的：

接下來我用代碼解釋下這句話（正確的做法是，在圖表容器被銷毀之後，調用 echartsInstance.dispose 銷毀實例，在圖表容器重新被添加後再次調用 echarts.init 初始化）：

const myEchart = ref(null)

// 組件掛載完成時調用
onMounted(() => {
  testEcharts() // （在圖表容器重新被添加後再次調用 echarts.init 初始化）
})

const testEcharts = () => {
  myEchart.value = echarts.init(document.querySelector('.echarts-dom'))
  ...你的代碼...
}

// 組件被卸載後調用
onUnmounted(() => {
  myEchart.value.dispose() // （在圖表容器被銷毀之後，調用 echartsInstance.dispose 銷毀實例）
})

總結：

在有 Echarts 圖表的頁面在卸載時我們都要對圖表進行銷毀