解决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()
      }
    })