使用ResizeObserver观察DOM元素的尺寸变化
文章目录
- 关于ResizeObserver
- 示例代码
- 示例代码结果如下所示
- echarts自适应容器div大小
- 示例代码结果如下所示
- echarts自适应容器大小的方式二
关于ResizeObserver
关于这个Web API,可以看mdn的官网,ResizeObserver - Web API | MDN (mozilla.org),这里面有关于这个ResizeObserver 接口的说明。这个在可视化大屏的时候,关于echarts图表可能会用到这个,也就是说,需要做到echarts自适应容器div的大小。或者是低代码平台中要开发关于echarts的组件时会用到,我在低代码项目中,自定义开发echarts组件,就用到了这个内置的API。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Resize Observer with Input Events Example</title><style>#target {background-color: lightblue;margin: 20px;}</style>
</head>
<body><div id="target" style="width: 300px; height: 200px;">这个是绑定观察的元素:当前宽:300px, 高:200px
</div><label for="width">宽:</label>
<input type="number" id="width" value="300" min="0" max="500" placeholder="Set width">
<label for="height">高:</label>
<input type="number" id="height" value="200" min="0" max="500" placeholder="Set height"><div><button onclick="resizeObserver.disconnect()">停止观察</button><button onclick="resizeObserver.observe(targetElement)">重新观察</button>
</div><script>// 创建 ResizeObserver 实例const resizeObserver = new ResizeObserver(entries => {entries.forEach(entry => {console.log(`元素大小改变为,宽: ${entry.contentRect.width}px ,高: ${entry.contentRect.height}px`);targetElement.innerHTML = `这个是绑定观察的元素:当前宽:${entry.contentRect.width}px, 高:${entry.contentRect.height}px`;});});// 观察目标元素const targetElement = document.querySelector('#target');// 开始观察,可以观察多个元素,根据需求选择不同的元素即可,这里只拿一个作为示例// const targetElement1 = document.querySelector('#target1');// resizeObserver.observe(targetElement1);resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement = document.querySelector('#width');const heightInputElement = document.querySelector('#height');// 添加 input 事件监听器widthInputElement.addEventListener('input', function() {// 更新目标元素的宽度targetElement.style.width = `${this.value}px`;});heightInputElement.addEventListener('input', function() {// 更新目标元素的高度targetElement.style.height = `${this.value}px`;});// 在不再需要观察时取消观察// resizeObserver.unobserve(targetElement);// 清理观察器// resizeObserver.disconnect();
</script></body>
</html>
示例代码结果如下所示
注意看GIF图中的宽高数字变化
echarts自适应容器div大小
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Resize Observer with Input Events Example</title><!-- 在线引入echarts,因为是在线的,所以有可能会失效,如果链接失效了,自己去echarts官网找,然后引用即可 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><label for="width">宽:</label><input type="number" step="20" id="width" value="600" min="0" max="1000" placeholder="Set width"><label for="height">高:</label><input type="number" step="20" id="height" value="400" min="0" max="800" placeholder="Set height"><div><button onclick="resizeObserver.disconnect()">停止观察</button><button onclick="resizeObserver.observe(targetElement)">重新观察</button></div><script>// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 创建 ResizeObserver 实例const resizeObserver = new ResizeObserver(entries => {entries.forEach(entry => {console.log(`元素大小改变为,宽: ${entry.contentRect.width}px ,高: ${entry.contentRect.height}px`);myChart.resize();});});// 观察目标元素const targetElement = document.querySelector('#main');// 开始观察,可以观察多个元素,根据需求选择不同的元素即可,这里只拿一个作为示例// const targetElement1 = document.querySelector('#target1');// resizeObserver.observe(targetElement1);// 如果在vue中,这个应该在组件挂载时调用resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement = document.querySelector('#width');const heightInputElement = document.querySelector('#height');// 添加 input 事件监听器widthInputElement.addEventListener('input', function () {// 更新目标元素的宽度targetElement.style.width = `${this.value}px`;});heightInputElement.addEventListener('input', function () {// 更新目标元素的高度targetElement.style.height = `${this.value}px`;});// 在不再需要观察时取消观察,如果是在vue中,这个应该在组件销毁时调用// resizeObserver.unobserve(targetElement);// 清理观察器,如果是在vue中,这个应该在组件销毁时调用// resizeObserver.disconnect();</script></body></html>
示例代码结果如下所示
具体看下面的GIF图,这里通过输入数字的方式,模拟div大小变化时,echarts自适应容器大小。
echarts自适应容器大小的方式二
文章一:Echarts自适应div大小_echarts div resize-CSDN博客
文章二:vue3项目中让echarts适应div的大小变化,跟随div的大小改变图表大小_echart图根据div大小变化-CSDN博客
相关文章:

使用ResizeObserver观察DOM元素的尺寸变化
文章目录 关于ResizeObserver示例代码示例代码结果如下所示echarts自适应容器div大小示例代码结果如下所示echarts自适应容器大小的方式二 关于ResizeObserver 关于这个Web API,可以看mdn的官网,ResizeObserver - Web API | MDN (mozilla.org)ÿ…...

前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作(可拖拽的视频实时播放弹框,底层元素可以正常操作)
简述:在前端开发中,弹框和实时视频播放是常见的需求。这里来简单记录一下,如何使用Vue.js和Element UI实现一个可拖动的弹框,并在其中播放实时视频。同时,确保在拖拽弹框时,底层元素仍然可以操作。 一、项目…...

文华财经多空K变色支撑压力画线趋势波段指标公式
文华财经多空K变色支撑压力画线趋势波段指标公式: VERTLINE(TIME0900,RGB(128,128,255)),DOT; VERTLINE(TIME2100,COLORBLACK),DOT; HH:HHV(HIGH,26); LL:LLV(LOW,26); HH1:BARSLAST((HH > REF(HH,1))); LL1:BARSLAST((LL < REF(LL,1))); PARTLINE((HH…...
tomcat9漏洞CVE-2024-23672
序号 漏洞名称 影响主机个数 1 Apache Tomcat 安全漏洞(CVE-2024-23672) 1/1 2 Apache Tomcat 输入验证错误漏洞(CVE-2024-24549) 1/1 漏洞名称:CVE-2024-23672 影响版本:tomcat9.0.0-M1 to 9.0.85;tomcat8.5.0 to 8.5.98 处理…...

ChatGLM-6B入门
ChatGLM-6B ChatGLM-6B 一、介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型,基于 General Language Model (GLM) 架构,具有 62 亿参数。结合模型量化技术,用户可以在消费级的显卡上进行本地部署(INT4 量化级别下最…...

项目实战--Spring Boot + GraphQL实现实时数据推送
背景 用户体验不断提升而3对实时数据的需求日益增长,传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言,提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架,利用GraphQL实现实时数据推…...
ASPICE是汽车软件开发中的质量保证流程
复杂的汽车系统对软件的质量和可靠性提出了极高的要求。为了确保汽车软件的高质量和可靠性,ASPICE(Automotive SPICE,汽车软件过程改进和能力确定)流程应运而生。本文将对ASPICE流程进行详细介绍。 一、ASPICE概述 ASPICE是汽车行…...
Linux调试器-gdb使用以及Linux项目自动化构建工具-make/Makefile
目录 1.gdb背景2.开始使用gdb3.make/makefile 背景4.实例代码5.依赖关系6.依赖方法7.原理8.项目清理 1.gdb背景 程序的发布方式有两种,debug模式和release模式 Linux gcc/g出来的二进制程序,默认是release模式 要使用gdb调试,必须在源代码生…...

Html5前端基本知识整理与回顾下篇
今天我们继续结合发布的Html5基础知识点文档进行复习,希望对大家有所帮助。 目录 列表 无需列表 有序列表 自定义列表 样例 表格 基本属性 编辑 相关属性 Border Width Height 编辑 表格标题 编辑 表格单元头 合并单元格 垂直单元格合并 水…...

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容
1. 虚拟机先扩容 1.1 关机,并点击系统,让他是点选状态,但是没开机 1.2 右击,点击最下方设置,点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小,数字为总大小 完成提示: 磁盘已成功扩展。您…...

什么样的开放式耳机好用?,五大超强卷王单品推荐!
对于热衷尝试不同耳机类型的小伙伴们而言,经过对佩戴舒适度、音质清晰度及电池续航能力的全面考量,开放式蓝牙耳机因其卓越的平衡性脱颖而出,成为多数人的心头好。其轻巧设计不仅保证了长时间佩戴的舒适感,还兼顾了音质与续航的双…...

java使用poi-tl模版引擎导出word之饼状图生成及循环批量生成饼状图
文章目录 一、单个饼状图生成1.word模版制作2.编写接口完整代码3.导出结果 二、批量生成饼图1.word模版制作2.编写接口完整代码3.导出结果 一、单个饼状图生成 1.word模版制作 在word中创建一个饼状图,点击图表,点击“文本选项”,在可选文字…...
指定版本ceph-common安装
如,安装15.2.13的ceph-common PACKAGE_NAMEceph-common CEPH_VERSION15.2.13 wget -q -O- https://download.ceph.com/keys/release.asc | sudo apt-key add - echo deb http://download.ceph.com/debian-${CEPH_VERSION}/ $(lsb_release -sc) main | sudo tee …...
C++语言特性——关键字(static、volatile、extern、const、mutable、inline)
注意: 本内容为摘抄网上的学习资料,作为个人笔记使用,如有侵权, 立刻删除。 C语言特性 1.关键字 (1)static static全局变量和普通全局变量 面试高频指数:★★★☆☆ 相同点: 存储方式&…...
在Ubuntu 16.04上安装和配置VNC的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 ###介绍 VNC,即“Virtual Network Computing”,是一种连接系统,允许您使用键盘和鼠标与远程服务器上…...

@RequestBody注解的使用及源码解析
前言 RequestBody 注解是我们进行JavaEE开发,最常见的几个注解之一,这篇博文我们以案例和源码相结合,帮助大家更好的了解 RequestBody 注解 使用案例 1.自定义实体类 Data NoArgsConstructor AllArgsConstructor public class User {priv…...

linux 服务器数据备份 和 mysql 数据迁移
查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库(表)到本地 mysqldump是MySQL自带的一个实用程序&…...

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?
安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,EasyCVR基于云边端一体化架构,具有强大的数据接入、处理及分发能力,可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…...

S32V234平台开发(一)快速使用
快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子,一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…...
C# 如何防止反编译?C#程序加密混淆保护方法大全
在C#开发中,由于.NET程序集(assemblies)是基于中间语言(Intermediate Language, IL)编译的,这些程序集可以被反编译回接近原始源代码的形式。为了保护代码不被轻易反编译,开发者可以采取以下几种…...

大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...