因为之前变量在方法里面直接定义的
const charts = () => {
let objAll = echarts.init(document.querySelector('.obj-all'))
objAll.setOption(jobAllFun())
}
这样不会有echarts悬停tooltip不显示的问题
但是路由切换的时候 echarts 会不显示
后来发现是因为echarts 没有回收 又重新加载 就会出错不显示
所有改成了下面这种定义方法
let objAll = ref(null)
const charts = () => {
objAll.value = echarts.init(document.querySelector('.obj-all'))
objAll.value.setOption(jobAllFun())
}
然后在离开页面后回收
onBeforeUnmount(() => {
if (objAll.value) {
objAll.value.dispose()
}
})
这个时候还没注意到 悬停tooltip不显示了 等注意到的时候已经不知道是哪里出了问题
又看是不是配错了 甚至重新写了 都不行
后来才发现 vue3 +echarts
let objAll = ref(null) 不能用 ref 来定义变量
let objAll = shallowRef(null)
这样就可以显示了
