我的需求是echarts图表全屏后退出全屏在edge浏览器上没有什么问题但是在Chrome浏览器上会出现表格的线不能变回原来的比例的问题

 我就想在退出全屏的时候强制刷新一下echarts图表外面的这个div

useEffect(() => {if (col) {col.addEventListener("webkitfullscreenchange", escFunction); /* Chrome, Safari and Opera */col.addEventListener("mozfullscreenchange", escFunction); /* Firefox */col.addEventListener("fullscreenchange", escFunction); /* Standard syntax */col.addEventListener("msfullscreenchange", escFunction); /* IE / Edge */return () => {//销毁时清除监听col.removeEventListener("webkitfullscreenchange", escFunction);col.removeEventListener("mozfullscreenchange", escFunction);col.removeEventListener("fullscreenchange", escFunction);col.removeEventListener("MSFullscreenChange", escFunction);}}// 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件},);const escFunction = () => {setIsFullScreen(!isFullScreen)if (!isFullScreen) {console.log('退出全屏')div.style.height = '250px'//图表容器tag.style.display = 'block'setNum(Math.random())}}

但是这样刷新完了之后数据会全部消失不变看了一下echarts的文档，每次图表的容器变化后都要用resize()方法重构一下图表,因为还有要动态更新的数据我就写了一个useEffect()钩子函数用来刷新数据和重构图表当num或者data变化的时候就会刷新数据并重构图表

 useEffect(() => {var roseCharts = document.getElementsByClassName("roseChart___TFZ37");// console.log(data)if (data) {var myChart = echarts.init(roseCharts);myChart.setOption(options,true);window.addEventListener("resize", function () {myChart.resize();});}}}, [data,num])

echarts官网关于resize()的介绍