前端通过ResizeObserver来监听dom大小动态渲染echarts

export const GlobalResizeObserver = (function () {const ATTR_NAME = 'global-resizeobserver-key'const attrValueToCallback = {}function antiShake(fn, delay, immediate = false) {let timer = null//不能用箭头函数return function () {//在时间内重复调用的时候需要清空之前的定时任务if (timer) {clearTimeout(timer)}//适用于首次需要立刻执行的if (immediate && !timer) {fn.apply(this, arguments)}timer = setTimeout(() => {fn.apply(this, arguments)}, delay)}}// const fn = antiShake((callback, entry) => {//   callback(entry)// }, 300)const o = new ResizeObserver((entries) => {for (const entry of entries) {const resizedElement = entry.targetconst attrValue = resizedElement.getAttribute(ATTR_NAME)if (attrValue) {const callback = attrValueToCallback[attrValue]if (typeof callback === 'function') {callback()// fn(callback, entry)}}}})return Object.freeze({/*** @param { Element } element* @param { (ResizeObserverEntry) => {} } callback*/observe(chart) {if (!(chart._dom instanceof Element)) {console.error('GlobalResizeObserver, cannot observe non-Element.')return}let attrValue = chart._dom.getAttribute(ATTR_NAME)if (!attrValue) {attrValue = String(Math.random())chart._dom.setAttribute(ATTR_NAME, attrValue)}// 为每个元素创建独立的防抖函数const debouncedResize = antiShake(() => {chart.resize()}, 300)attrValueToCallback[attrValue] = debouncedResize// attrValueToCallback[attrValue] = chart.resizeo.observe(chart._dom)},/*** @param { Element } element*/unobserve(chart) {if (!(chart._dom instanceof Element)) {console.error('GlobalResizeObserver cannot unobserve non-Element.')return}const attrValue = chart._dom.getAttribute(ATTR_NAME)if (!attrValue) {console.error('GlobalResizeObserver cannot unobserve element w/o ATTR_NAME.',)return}delete attrValueToCallback[attrValue]o.unobserve(chart._dom)chart.dispose()},})
})()

使用方式

先去mainjs去注册

import {GlobalResizeObserver} from '@/utils/echartsResize.js'
Vue.prototype.GlobalResizeObserver = GlobalResizeObserver

 在vue2里面使用

  destroyed() {this.GlobalResizeObserver.unobserve(this.radarChart)this.GlobalResizeObserver.unobserve(this.lineChart)},methods: {initEcharts() {this.radarChart = echarts.init(document.querySelector('#radar'))this.lineChart = echarts.init(document.querySelector('#line'))this.GlobalResizeObserver.observe(this.radarChart)this.GlobalResizeObserver.observe(this.lineChart)},}

有个小的地方需要注意 像这种布局 

尽量使用width百分比来渲染 尽量不用flex-grow 缩放虽然没问题 但调整浏览器的大小就会有不触发的情况 

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

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

相关文章

Java 实现将List按照字符串(特定规则)排序

日常开发中我们通常会遇到将一个List按照特定的规则排序,例如我们需要将一个List按照 “广州市”, “深圳市”, “珠海市”, “汕头市” 的顺序排序,我们可以使用下述方式实现。 City实体类 import lombok.AllArgsConstructor; import lombok.Data; im…

如何使用飞书快捷指令无感记账,ios版

总结 很多人无法长期坚持记账,主要是每次消费需要打开手机软件,一系列繁琐的操作,导致过程中可能就忘了。 今天给大家带来飞书自动记账。 演示视频 点击查看:https://www.douyin.com/video/7312857946382241063 安装 下载快捷…

hive调优原理详解:案例解析参数配置(第17天)

系列文章目录 一、Hive常问面试函数(掌握) 二、Hive调优如何配置(重点) 文章目录 系列文章目录前言一、Hive函数(掌握)11、JSON数据处理12、炸裂函数13、高频面试题13.1 行转列13.2 列转行 14、开窗函数&a…

mac Canon打印机连接教程

官网下载安装驱动: 选择打印机类型和mac系统型号下载即可 Mac PS 打印机驱动程序 双击安装 系统偏好设置 点击“”添加: OK可打印玩耍!! 备注: 若需扫描,下载扫描程序: 备注:…

禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

目录 1.要解决的问题2.一技能:原生属性,小试牛刀3.二技能:傀儡input,瞒天过海4.三技能:JavaScript出击,直接开大5.九九八十一难,永远还有最后一难 写在前面: 如有转载,务…

ElasticSearch 和 MySQL的区别

MySQLElasticSearch 数据库(database)索引(index)数据表(table) 类型(type) 记录文档(document,json格式) 一、ES基础命令 1. ES cat查询命令 2.…

如何用一个二维码实现企业固定资产管理?

固定资产管理中普遍存在盘点难、家底不清、账实不一致、权责不清晰等问题。如果平时不规范化执行,年终面对上上下下、大大小小、成百上千件物资要进行盘点整理的时候,会是十分痛苦且低效的事情。 今天这篇文章就来给大家推荐几家便宜好用的二维码固定资…

动态人物抠图换背景 MediaPipe

pip下载 MediaPipe pip install mediapipe -i 手部特征点模型包包含一个手掌检测模型和一个手部特征点检测模型。手掌检测模型在输入图片中定位手部,手部特征点检测模型可识别手掌检测模型定义的被剪裁手掌图片上的特定手部特征点。 由于运行手掌检测模型非常耗时&…

商务英语培训柯桥外语学校生活口语“Rose”是玫瑰,那“Under the rose”是“玫瑰之下”?

最近,《玫瑰的故事》很火,女主角在剧中也经常收到黄色的玫瑰花。玫瑰花常常与爱情、美丽和浪漫相关,今天一起跟着英语君学习玫瑰花的俚语吧。 Under the rose 意思:私下地、秘密地或隐秘地。来自拉丁语短语sub-rosa,它…

k8s架构设计思想

1.谷歌borg云计算管理平台 一类:infrastucture platform software 另一类:borg为主的非虚拟化技术,调度进程 核心是轻量级作业调度,不是做虚拟化/云平台的 borg本身用了一些容器技术 生产业务product workload要求高可用&#xf…

Maven - 在没有网络的情况下强制使用本地jar包

文章目录 问题解决思路解决办法删除 _remote.repositories 文件代码手动操作步骤验证 问题 非互联网环境,无法从中央仓库or镜像里拉取jar包。 服务器上搭建了一套Nexus私服。 Nexus私服故障,无法连接。 工程里新增了一个Jar的依赖, 本地仓…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于改进目标级联分析法的交直流混联系统发电-备用分布式协同调度》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

Docker Compose 一键快速部署 RocketMQ

Apache RocketMQ是一个开源的分布式消息中间件系统,最初由阿里巴巴开发并贡献给Apache软件基金会。RocketMQ提供了高性能、高可靠性、高扩展性和低延迟的消息传递服务,适用于构建大规模分布式系统中的消息通信和数据同步。 RocketMQ支持多种消息模型&am…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【15】异步_线程池

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【15】异步_线程池 初始化线程的 4 种方式开发中为什么使用线程池线程池七大参数线程池工作原理常见的 4 种线程池生产中如何使用线程池?CompletableFuture 异步编排—简介业务…

selenium4如何指定chrome和firefox的驱动(driver)路径

pythonpytestselenium框架的自动化测试脚本。 原本用的chrome,很久没用了,今天执行,发现chrome偷偷升级,我的chromedriver版本不对了。。。鉴于访问chrome相关网站太艰难,决定弃用chrome,改用firefox。因为…

2.SQL注入-字符型

SQL注入-字符型(get) 输入kobe查询出现id和邮箱 猜测语句,字符在数据库中需要用到单引号或者双引号 select 字段1,字段2 from 表名 where usernamekobe;在数据库中查询对应的kobe,根据上图对应上。 select id,email from member where usernamekobe;编写payload语…

JAVA期末速成库(10)第十一章

一、习题介绍 Check Point:P416 11.1,11.6,11.7,11.8,11.12,11.17,11.24 Programming Exercise:11.1 二、习题及答案 Check Point: 11.1 True or false? A subcl…

CST--如何在PCB三维模型中自由创建离散端口

在使用CST电磁仿真软件进行PCB的三维建模时,经常会遇到不能自动创建离散端口的问题,原因有很多,比如:缺少元器件封装、开路端口、多端子模型等等,这个时候,很多人会选择手动进行端口创建,但是&a…

【redis】Redis AOF

1、AOF的基本概念 AOF持久化方式是通过保存Redis所执行的写命令来记录数据库状态的。AOF以日志的形式来记录每个写操作(增量保存),将Redis执行过的所有写指令记录下来(读操作不记录)。AOF文件是一个只追加的文件&…

已解决javax.security.auth.login.LoginException:登录失败的正确解决方法,亲测有效!!!

已解决javax.security.auth.login.LoginException:登录失败的正确解决方法,亲测有效!!! 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 1. 检查用户名和密码 用户名和密码验证 2. 验证配置文件 …