前提问题:数据可视化大屏展示包含echarts图表,当网页进行放大或缩小时,echarts图表需要根据自己所在的父级区域的大小变化而变化
解决过程:echarts图表初始化渲染后,需要监听网页变化,随之进行resize,添加全局的监听事件后,要进行销毁该监听事件,否则会因为全局事件一直存在,造成内存泄漏
解决结果:
本项目中使用了mitt机制进行方法传递,mitt机制如何使用详见另一篇文章关于mitt的注入与使用
1.在echarts图表所在的子组件内封装全局唯一名称的方法
//图表根据窗口大小变化自适应大小
const isFruitWorkWindowResize = bool =>{
if(bool){
fruitChart.resize()
}
}
mitter.on('isFruitWorkWindowResize', isFruitWorkWindowResize)
onBeforeUnmount(() => {
//销毁事件
mitter.off('isFruitWorkWindowResize', isFruitWorkWindowResize)
})
2.在大屏父组件中,监听到全局大小发生改变时,进行调用echarts图表的resize方法
//重新渲染图表
const resizeEcharts = () => {
mitter.emit('isFruitWorkWindowResize',true)
}
onMounted(() => {
//图表大小随窗口大小自适应
window.addEventListener('resize',resizeEcharts)
});
3.在离开当前页面后进行销毁全局监听
onBeforeUnmount(() => {
//销毁
window.removeEventListener('resize', resizeEcharts);
})