echarts图表用key强制刷新后空白

迪卢克的现任

已于 2024-02-26 13:46:19 修改

阅读量615

点赞数 9

文章标签： echarts 前端 javascript

于 2024-02-26 13:41:40 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53644435/article/details/136297032

版权

文章讨论了在使用Echarts创建图表时，如何在Chrome浏览器上处理全屏切换时表格线比例问题。作者提到需在退出全屏时强制刷新图表容器并重构图表，以及使用`resize()`方法来适应容器大小变化。同时关注了数据更新与图表重置的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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