我的需求是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()的介绍