当打开一个页面时候,页面中有几个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)
})
})
}