解決vue3線上環境組件重新渲染但是echarts圖表無法正常顯示問題

問題

線上環境vue組件第一次渲染時echarts圖表可以正常渲染展示，但是第二次進入組件時（組件重新渲染）echarts無法正常渲染展示

排查

通過檢查dom發現雖然組件第二次重新渲染時，第一次組件渲染生成的echarts實列依然存在（未銷毀）導致第二次組件渲染但是echarts無法成功渲染展示

解決辦法

在組件每次渲染時都執行一次echants實列銷毀操作

代碼

    <div class="show-charts">
      <div class="charts" id="profitCharts"></div>
    </div>

    const getProfit = async () => {
      myChart.clear()
      try {
        ...
        myChart.setOption(profitOption(chartsSet), true)
      } catch (error) {
        console.log(error, 'notde:::::::::Error')
      }
    }


    onMounted(() => {
      echarts.init(document.getElementById("profitCharts")).dispose() // 17635解決線上環境tab切換不渲染echarts問題，銷毀echarts實列解決組件重新渲染時echarts組件不重新渲染
      myChart = echarts.init(document.getElementById("profitCharts"))
      getProfit()
      window.onresize = function () {
        myChart.resize()
      }
    })