echarts图表随网页大小变化而重新渲染

前提问题：数据可视化大屏展示包含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);
})