vue+echarts 监测窗口变化缩放窗口切换有echarts的页面 echarts会空白不出现控制台也没有报错信息

本文链接：https://blog.csdn.net/weixin_41628411/article/details/119668240

**1、问题：**我有两个页面有大量的echarts 并且进行了监测窗口缩放echarts自适应大小在这里插入代码片，但是我进行缩放窗口之后切换这两个页面甚至切换其他页面，都会有echarts空白不出现，控制台也没有报错信息。
**2、分析产生问题的原因：**因为控制台并没有报错信息，说明代码实现的逻辑没什么问题，也不会是echarts等版本的原因，首先排查切换页面时是否是dom还未进行加载，也就是代码执行顺序的原因，经过检查之后并不是这样的问题，那么就只可能是一种情况了（因为控制台并没有报错的原因），那就是浏览器缓存导致切换页面的时候会出现dom没变化的情况（比较类似于echarts在v-show v-if下的问题），这就比较简单了系统中实现主区域加载切换页面的是<keep-alive> <router-view /> </keep-alive>页面初始化方法的调用在钩子函数中activated()，
**3、解决办法：**将keep-alive去除页面中初始化加载方法的调用改为mounted()完美解决

echarts 自适应

mounted () {
    this.$nextTick(() => {
      const myChart = echarts.init(document.getElementById('activity_myChart'))
      const myChart2 = echarts.init(document.getElementById('activity_myChart2'))
      const myChart3 = echarts.init(document.getElementById('activity_myChart3'))
      const myChart4 = echarts.init(document.getElementById('activity_myChart4'))
      // this.getDataList()
      this.getCharts(myChart)
      this.getCharts2(myChart2)
      this.getCharts3(myChart3)
      this.getCharts4(myChart4)

      window.addEventListener('resize', function () {
        myChart.resize()
        myChart2.resize()
        myChart3.resize()
        myChart4.resize()
      })
    })
  },