<keep-alive>缓存的页面echarts图表消失问题

35 阅读1分钟

情景复现:打开多个页面后切回已打开的标签页,发现原先的 echarts 图表消失了。

原因排查:因为用 keep-alive 对标签页做了缓存,在别的标签页中触发了窗口大小变化,被缓存的标签页中的 echarts 重绘时拿不到宽高。

解决方法:在标签页的生命周期钩子 activated 中调用图表的 resize 方法

  activated () {
    this.$nextTick(() => {
      this.chart?.resize()
    })
  },
  mounted () {}