vue 切换到另一个页面，再切换回来，echarts不触发更新?

Question

场景是：

  1个table页面（A1），一个echarts图表页面（A2）。
  初始化时，A2正常初始化图表展示。
  点击切换按钮，从A1再切换回A2时，A2页面的文字数据正常加载，echarts图表触发没有初始化，想问下大佬们，怎么触发echarts图表加载？
  

代码如下：
App.vue

<template>
  <div id="app">
    <keep-alive>
<router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

A2.vue

  <div class="mode-part-two">
     <div class="chart-row-one chart-border" id="bar"></div>
     <div class="chart-row-one chart-border" id="area"></div>
     <div class="chart-row-one " id="barLevel"></div>
     <div class="chart-row-three" id="line"></div>
 </div>

  data () {
    return {
      barEcharts: null,
      areaEcharts: null,
      lineEcharts: null,
      barLevelEcharts: null
    }
  },
  activated () {
    // 基于准备好的dom，初始化echarts实例,绘制图表
      this.barEcharts.clear();
      this.areaEcharts.clear();
      this.lineEcharts.clear();
      this.barLevelEcharts.clear();
      this.barEcharts      = echarts.init(document.getElementById('bar')).setOption(barOption())
      this.areaEcharts     = echarts.init(document.getElementById('area')).setOption(areaOption())
      this.lineEcharts     = echarts.init(document.getElementById('line')).setOption(lineOption())
      this.barLevelEcharts = echarts.init(document.getElementById('barLevel')).setOption(barLevelOption())
 }     

Answer 1

在activated中手动触发resize事件试下呢

var myEvent = new Event('resize')
window.dispatchEvent(myEvent)

Answer 2

建议尝试一下activated里面的不用重新init，而是直接setOption

this.barEcharts.clear().setOption(barOption())

类似于这样，试试吧。

Answer 3

因为你用了 keep-alive，有缓存导致的，给 标签 keep-alive 设置 exclude 属性为 A2 即可

Answer 4

可以把clear 换成 dispose 试试，销毁实例再初始化

Answer 5

请问楼主最后解决吗？怎么解决的，遇到同样问题