缩放浏览器后切换路由导致echart不能显示

当打开一个页面时候，页面中有几个echart图，宽高是根据百分比确定的。这时候切到另一个页面，再缩放浏览器，再切回初始页面，会导致echart图显示不出。
这是因为vue中路由切换是有内置组件keep-live，保存了当前页面的属性，相当于给这个页面设置了display：none，当切换再切回去时候，保存的图的属性和当前浏览器大小不匹配，就认为这个图没被加载过，它的的宽高都是0了。

解决方案：
单个解决：在每页中加个生命周期：activated(){xxxxx.resize()}//找到图的dom元素的名字xxxxx
这个生命周期触发，是跳入keep-alive的时候触发的，create()只触发第一个，而这个每次跳过来都触发。
全局解决：挂个js文件到main.js下

import echarts from 'echarts'

const map = new Map()
const _echarts.init = echarts.init//为了接管方法的时候，保持方法不变，复制一份先（为什么要复制-令指针地址不同）
export const echartsInit = (vue) => {
  //接管这个方法，不改变出入参，只是每次执行这个方法的时候，map记录
  echarts.init = (ele) => {
    let pathUrl = vue.$route.path
    let a = map.get(pathUrl)
    if (!a) a = []
    a.push(ele)
    map.set(pathUrl, a)
    return _echarts.init(ele)
  }
  //监控，根据map来判断是否要resize
  vue.$watch(() => vue.$route.path, (newValue, oldValue) => {
    let a = map.get(newValue)
    if (!a) return
    a.forEach(e => {
      let eleInit = initFunc(e)
      setTimeout(() => {
        eleInit.resize()
      }, 0)
    })
  })
}