ResizeObserver的使用

这篇说下ResizeObserver API。ResizeObserver接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

ResizeObserver避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范,则应在绘制前和布局后调用 resize 事件。

这是官方介绍:ResizeObserver

方法

ResizeObserver.disconnect()

取消特定观察者目标上所有对 Element 的监听。

ResizeObserver.observe()

开始对指定 Element 的监听。

ResizeObserver.unobserve()

结束对指定 Element 的监听。

使用

let resizeObserver;if (!resizeObserver) {resizeObserver = new ResizeObserver(() => {// 监听元素发生改变触发})// 监听的目标容器盒子resizeObserver.observe(Element)
}

使用碰到的问题

在使用echarts图表的时候,我用这个api相对多点,在这之前我是监听的window的resize方法,当浏览器分辨率、缩放改变的时候调用echarts的resize方法来实现图表自适应,但是这样当局部容器盒子宽高发生改变时并不能监听到。

从此后我就使用了ResizeObserver API了,确实只要当容器盒子发生改变就可以进行监听到实现自适应,但是有个问题:我们一般在echarts setOption之后会进行监听图表容器的变化,来实现图表的自适应,就像下面这样写的:

this.charts = echarts.init(document.getElementById(this.id))
let option = {// ...
}
this.charts.setOption(option);
if (!this.resizeObserver) {this.resizeObserver = new ResizeObserver(() => {if (this.charts) {this.charts.resize()}});this.resizeObserver.observe(document.getElementById(this.id));
}

但是这样写,我们图表在进行第一次绘制的时候,就失去了动画效果 ,就是我们echarts图表自身时带有动画效果的,下面是一些官方基础配置:

具体是为什么失去了动画,我也没太搞明白,没去看ResizeObserver或者echarts的动画这块儿的源码,时间、精力有限。然后就简单看了下如何解决这个问题

我们要解决这个问题,其实也很简单,就是我们在echarts setOption之后等图表第一次绘制并动画结束之后再使用ResizeObserver监听即可。使用setTimeout 延迟就可以了,至于延迟几秒是取决于echarts中的animationDuration配置(这个动画时长),默认是1000ms ,所以我们把上面代码改造成下面就可以:

this.charts = echarts.init(document.getElementById(this.id))
let option = {// ...
}
this.charts.setOption(option);
if (!this.resizeObserver) {setTimeout(() => {this.resizeObserver = new ResizeObserver(() => {if (this.charts) {this.charts.resize()}});this.resizeObserver.observe(document.getElementById(this.id));}, 1000)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Yarn常见问题处理

任务出现container OOM异常导致作业失败 原因 Container内存不足或者作业数据倾斜 解决方案 检查Container相关参数,判断是否设置过小(低于4GB)。如果Container小于4GB,优先考虑调大当前作业container大小,如果是Tez任务,还需要同步调整以下参数 # tez container size…

双非本科准备秋招(17.1)—— 力扣二叉树

1、257. 二叉树的所有路径 要求返回根节点到叶子节点的所有路径,这里用前序遍历就好。 每次递归前,都让字符串s加上当前节点的值和“->”,然后判断是否为叶子节点,如果是的话,说明这条路径是一个答案,因…

为啥餐饮界营销频频出圈?媒介盒子分享

回看2023年的营销热点,茶饮界和餐饮行业依然占据了最多的出圈镜头,从麦当劳的“麦门”到海底捞的科目三,许多餐饮和食品品牌都依靠营销策划和巧思成功占据了用户心智。毫无疑问,内容已经成为公认的和用户沟通的最佳手段。今天媒介…

Django的配置文件setting.py

BASE_DIR 项目路径:默认是已经打开的主项目路径 ​​​​​​​BASE_DIR os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY 密钥 SECRET_KEY (dh&_fm2hfn9y)35!_6#$a7q%%^onoy#-a8x18r4(6*8f(aniDEBUG 帮助调试,默认…

【EI会议征稿通知】第三届智能控制与应用技术国际学术会议(AICAT 2024)

第三届智能控制与应用技术国际学术会议(AICAT 2024) 2024 3rd International Symposium on Artificial Intelligence Control and Application Technology 2024年第三届智能控制与应用技术国际学术会议(AICAT 2024)定于2024年5月…

Android14之Selinux报错:unknown type qemu_device at token (一百八十三)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)

最近要批量解压归档文件和压缩包,所以就想能不能并行执行这些工作。因为tar自身不支持并行解压,但是像make却可以支持生成一些文件,所以我才有了这种想法。 方法有两种,第一种不用安装任何软件或工具,直接bash或其他 …

QXlsx Qt操作excel(2)

QXlsx 是一个用于处理Excel文件的开源C库。它允许你在你的C应用程序中读取和写入Microsoft Excel文件(.xlsx格式)。该库支持多种操作,包括创建新的工作簿、读取和写入单元格数据、格式化单元格、以及其他与Excel文件相关的功能。 关于QXlsx的…

动力电池智能工厂数字孪生可视化,助力新能源汽车产业数字化转型

动力电池智能工厂数字孪生可视化,助力新能源汽车产业数字化转型。随着新能源汽车产业的快速发展,动力电池作为新能源汽车的核心组成部分,其生产制造的数字化转型也成为了行业关注的焦点。动力电池智能工厂数字孪生可视化平台作为一种新型的技…

Python中的HTTP代理服务器和客户端的区别与联系

在Python编程中,当我们涉及到网络通信,尤其是HTTP请求时,经常会听到“HTTP代理服务器”和“客户端”这两个词。它们在网络世界中扮演着不同的角色,但又有着紧密的联系。 区别 首先,我们来谈谈它们的区别。 HTTP代理…

阿里云服务器多少钱一年?4核16G10M带宽26元/月

2024年2月阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核…

vue基本语法总结大全

vue基本语法 文章目录 vue基本语法基本用法内容渲染指令属性绑定指令使用js表达式事件绑定指令条件渲染指令v-else和v-else-if指令列表渲染指令v-for中的key 组件化开发安装详细讲解 第三方组件1. 组件间的传值2. element-ui介绍3. 组件的使用4. 图标的使用 Axios网络请求1. Ax…

15:矩阵按键

矩阵按键 1、 矩阵按键的原理图分析2、 矩阵键盘的工作过程3、编程实战3.1、先通过LED灯进行按键测试3.2、通过静态数码管显示键值 1、 矩阵按键的原理图分析 (1)横向和纵向分割 (2)按键两端分别接不同的IO引脚 (3)按键的物理作用不变:按下接通电路,弹起…

ArcGIS Pro 按照字段进行融合或拆分

ArcGIS Pro 按字段融合 在ArcGIS Pro中,通过使用“融合”工具可以轻松地合并具有相同字段的图层。 步骤一:打开ArcGIS Pro 启动ArcGIS Pro应用程序,确保您已经登录并打开您的项目。 步骤二:添加图层 将包含相同字段的图层添加到…

06-Java适配器模式 ( Adapter Pattern )

原型模式 摘要实现范例 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁 适配器模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能 举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器。您将内…

CodeMeter强化了ETM WinCC 开放架构平台的许可与安全保护

在面对日益复杂的网络安全威胁时,ETM professional control采取了前瞻性的措施,选择了业界领先的威步CodeMeter技术,以保护其标志性的WinCC开放架构平台。这一选择不仅体现了ETM对安全的高度重视,也标志着其在保障关键基础设施运营…

《大魔界村》中的人物性格——亚瑟

《大魔界村》作为一款经典的街机动作游戏,其主角——勇敢的骑士亚瑟,以其独特的性格特点和坚定的信念,在玩家心中留下了深刻印象。本文将深入探讨亚瑟这一角色的性格特质,通过分析他在游戏中的行为表现及决策过程,展现他身上的勇气、坚韧与智慧三大要点。 一、无畏挑战的…

如何配置SSH实现无公网ip远程连接访问Deepin操作系统

📑前言 本文主要是配置SSH实现无公网ip远程连接访问Deepin操作系统的文章,如果有什么需要改进的地方还请大佬指出⛺️** 🎬作者简介:大家好,我是青衿🥇 ☁️博客首页:CSDN主页放风讲故事 &…

fastapi 链接数据库,并报错问题

还有一个重点需要下载 pip install sqlalchemy -i https://pypi.tuna.tsinghua.edu.cn/simple pip install pymysql -i https://pypi.tuna.tsinghua.edu.cn/simplefrom fastapi import FastAPI import uvicorn from student.urls import student_id_mysql from sqlalchemy …

【Linux】文件周边002之初步理解文件管理(打开的文件)

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.(打开…