情景复现:打开多个页面后切回已打开的标签页,发现原先的 echarts 图表消失了。
原因排查:因为用 keep-alive 对标签页做了缓存,在别的标签页中触发了窗口大小变化,被缓存的标签页中的 echarts 重绘时拿不到宽高。
解决方法:在标签页的生命周期钩子 activated 中调用图表的 resize 方法
activated () {
this.$nextTick(() => {
this.chart?.resize()
})
},
mounted () {}