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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/413062.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

批量改名神器:让文件名与主目录名同步,一键操作,轻松管理!

在数字化时代,我们每天都在与大量的文件打交道。从工作文档到个人照片,从视频剪辑到音乐收藏,文件的管理和整理成为了我们生活中不可或缺的一部分。然而,你是否曾经遇到过这样的烦恼:文件数量庞大,命名不规…

理解@Configuration和@Component注解的不同用途和作用范围

理解Configuration和Component注解的不同用途和作用范围 在Spring框架中,Configuration和Component是两个常见的注解,用于实现依赖注入和组件扫描等功能。虽然它们都是用于标识类的注解,但它们在作用和用途上有着明显的区别。本文将深入探讨C…

图扑数字孪生技术在航空航天方面的应用

"数字孪生"这一概念最早就是在航空航天领域使用,目的在于处理航天器的健康维护和保护问题。图扑软件依托自主研发的 HT for Web 产品,实现对民航机场、民航飞机、火箭发射、科技展馆的数字孪生展示。 图扑 HT 数字孪生技术助力航空航天数字孪…

基于JavaWeb实现的校园新闻发布系统

一、系统架构 前端:jsp | bootstrap | js | css 后端:springboot | jdbc 环境:jdk1.6 | mysql | maven 二、 代码及数据库 三、功能介绍 01. web端-首页 02. web端-新闻列表 03. web端-新闻明细 04. 管理端-登录页…

阿里云服务器最新收费标准及优惠价格参考(2024更新)

2024阿里云服务器优惠活动政策整理,轻量2核2G3M服务器61元一年、2核4G4M带宽165元1年,云服务器4核16G10M带宽26元1个月、149元半年,阿里云ECS云服务器2核2G3M新老用户均可99元一年续费不涨价,企业用户2核4G5M带宽199元一年&#x…

【Flink精讲】Flink组件通信

主要指三个进程中的通讯 CliFrontendYarnJobClusterEntrypointTaskExecutorRunner Flink内部节点之间的通讯使用Akka,比如JobManager和TaskManager之间。而operator之间的数据传输是利用Netty。 RPC是统称,Akka,Netty是实现 Akka与Ac…

ChatGPT 国内快速上手指南

ChatGPT简介 ChatGPT是由OpenAI团队研发的自然语言处理模型,该模型在大量的互联网文本数据上进行了预训练,使其具备了深刻的语言理解和生成能力。 GPT拥有上亿个参数,这使得ChatGPT在处理各种语言任务时表现卓越。它的训练使得模型能够理解上…

springboot集成quartz定时任务并接入后台管理系统(copy即用)

说明:项目启动后会根据设置的时间进行执行,业务代码根据自己的需求更改,数据库文件在最后(记得清空数据库哦~)这里需要注意的一点就是className字段表示的是下面的对应的DynamicTask的路径如:com.example.demo.quartz.task.DynamicTask,如有多个定时任务copy并更改Dynam…

网络安全之安全事件监测

随着人们对技术和智能互联网设备依赖程度的提高,网络安全的重要性也在不断提升。因此,我们需要不断加强网络安全意识和措施,确保网络环境的安全和稳定。 网络安全的重要性包含以下几点: 1、保护数据安全:数据是组织和…

MySQL多实例与Mycat分布式读写分离的架构实践

文章目录 1.Mycat读写分离分布式架构规划2.在两台服务器中搭建八个MySQL实例2.1.安装MySQL软件2.2.创建每个MySQL实例的数据目录并初始化2.3.准备每个实例的配置文件2.4.准备每个实例的启动脚本2.6启动每台机器的MySQL多实例2.7.为每个MySQL实例设置密码2.8.查看每个MySQL实例的…

删库跑路不用怕,来看看pgbackrest最佳实践

作者 马文斌 时间 2024-02-26 标签 pgbackrest 备份 实践 服务器介绍 ip软件角色192.168.1.14postgresprimary192.168.1.15postgresstandby192.168.1.16pgbackrest远程备份工具端 主从库远程备份 安装pgbackrest 备份工具 提前安装依赖包: yum install ma…

STM32程序(移植)中头文件的路径

例:#include "./BSP/LCD/lcd.h"为什么有的头文件加了路径? 先看AI的回答: 在C和C编程中,当我们在源文件中包含(或称为“引入”或“导入”)一个头文件时,编译器需要知道这个头文件的位置。通常,编译器会在…

gnss尾矿库安全监测系统是什么

【TH-WY1】GNSS尾矿库安全监测系统是一种利用全球导航卫星系统(GNSS)技术对尾矿库进行安全监测的系统。尾矿库是矿山企业的重要设施之一,用于存放矿山开采过程中产生的尾矿。由于尾矿库具有高能势和复杂的地质环境,存在溃坝、滑坡…

C++之类和对象(2)

目录 1.类的6个默认成员函数 2. 构造函数 2.1 概念 2.2 特性 3.析构函数 3.1 概念 3.2 特性 4. 拷贝构造函数 4.1 概念 4.2 特征 5.赋值运算符重载 5.1 运算符重载 5.2 赋值运算符重载 2. 赋值运算符只能重载成类的成员函数不能重载成全局函数 3. 用户没有显式实现时&…

GPT润色指令

1. GPT润色指令 Below is a paragraph from an academic paper. Polish the writing to meet the academic style,improve the spelling, grammar, clarity, concision and overall readability. When necessary, rewrite the whole sentence. Paragraph :你的句子…

php伪协议 [SWPUCTF 2022 新生赛]ez_ez_php(revenge)

打开题目 题目源代码如下 <?php error_reporting(0); if (isset($_GET[file])) {if ( substr($_GET["file"], 0, 3) "php" ) {echo "Nice!!!";include($_GET["file"]);} else {echo "Hacker!!";} }else {highlight_fi…

RubyMine 2023:让Ruby编程变得更简单 mac/win版

JetBrains RubyMine 2023是一款专为Ruby开发者打造的强大集成开发环境&#xff08;IDE&#xff09;。这款工具集成了许多先进的功能&#xff0c;旨在提高Ruby编程的效率和生产力。 RubyMine 2023软件获取 RubyMine 2023的智能代码编辑器提供了丰富的代码补全和提示功能&#…

1298 - 摘花生问题

题目描述 Hello Kitty 想摘点花生送给她喜欢的米老鼠。她来到一片有网格状道路的矩形花生地(如下图)&#xff0c;从西北角进去&#xff0c;东南角出来。地里每个道路的交叉点上都有种着一株花生苗&#xff0c;上面有若干颗花生&#xff0c;经过一株花生苗就能摘走该它上面所有…

AI与大数据:智慧城市安全的护航者与变革引擎

一、引言 在数字化浪潮的席卷下&#xff0c;智慧城市正成为现代城市发展的新方向。作为城市的神经系统&#xff0c;AI与大数据的融合与应用为城市的安全与应急响应带来了革命性的变革。它们如同城市的“智慧之眼”和“聪明之脑”&#xff0c;不仅为城市管理者提供了强大的决策…

软考47-上午题-【数据库】-数据查询语言DQL2

一、聚合函数 聚合函数实现数据统计的功能&#xff0c;返回一个单一的值。聚合函数一般与select语句的group by子句一起使用。 示例&#xff1a; 二、数据分组-group by 聚合函数加上group by子句进行分组。 通常一个聚合函数的作用范围是满足where子句中指定条件的记录&…