Vue---监听div元素宽高改变时echart图表重新resize

一、需求描述

当点击上图的红色框时,echart的div元素宽会改变但是无法触发echarts图表的resize重新渲染,对于浏览器而言,浏览器具有window.resize方法监听浏览器窗口大小的改变,而div元素没有监听宽高改变的方法。

二、解决方案

element-resize-detector依赖包可以监听div元素宽高的改变,官方文档如下

element-resize-detector - npm

这里简单演示使用步骤,具体请看官网文档

1、引入

import ElementResizeDetectorMaker from "element-resize-detector";

2、初始化实例

  elementResizeDetectorMaker = ElementResizeDetectorMaker({strategy: "scroll",});

3、mounted钩子函数监听

mounted(){
let dom = document.getElementById("元素id名称");if (!this.getIsNull(dom)) {this.elementResizeDetectorMaker.listenTo(dom, () => {// 监听元素宽高改变触发echarts的resize方法this.testChart.resize();});}
}

3、destroyed钩子函数销毁监听

  destroyed() {// 销毁监听let dom = document.getElementById("元素id名称");if (!this.getIsNull(dom)) {this.elementResizeDetectorMaker.uninstall(dom);}}

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

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

相关文章

SpringCloud复习:(7)@EnableZuulProxy注解的作用

使用zuul时,需要加EnableZuulProxy注解,这个注解定义如下: 可以看到,它引入了一个配置类ZuulProxyMarkerConfiguration,这个类代码如下: 其中定义了一个类型为ZuulProxyMarkerConfiguration.Marker类型的bean. 这个…

【目标跟踪】多目标跟踪测距

文章目录 前言python代码(带注释)main.pysort.pykalman.pydistance.py 结语 前言 先放效果图。目标框内左上角,显示的是目标距离相机的纵向距离。目标横向距离、速度已求出,没在图片展示。这里不仅仅实现对目标检测框的跟踪&#…

什么是React中的高阶组件(Higher Order Component,HOC)?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Hover:借贷新势力崛起,在经验与创新中找寻平衡

复苏中的Cosmos 如果让我选择一个最我感到可惜的区块链项目,我会选择Cosmos。 Cosmos最早提出并推动万链互联的概念,希望打通不同链之间的孤岛,彼时和另一个天王项目Polkadot号称跨链双雄。其跨链技术允许不同的区块链网络互相通信&#xf…

语雀宕机8小时,是否说明现在高可用架构很脆弱?

系列文章目录 高并发架构去重难?架构必备技能 - 布隆过滤器 当Dubbo遇到高并发:探究流量控制解决方案 主从选举机制,架构高可用性的不二选择 面试Dubbo ,却问我和Springcloud有什么区别? 消息队列选型——为什么选择R…

浅谈中国汽车充电桩行业市场状况及充电桩选型的介绍

安科瑞虞佳豪 车桩比降低是完善新能源汽车行业配套的一大重要趋势,目前各国政府都在努力推进政策,通过税收减免、建设补贴等措施提升充电桩建设速度,以满足新能源汽车需求。 近年来,在需求和技术的驱动下,充电桩的平…

docker在java项目中打成tar包

docker在java项目中打成tar包 1、首先安装一个docker desktop 2、mvn install项目后,建立一个自己的dockerfile 这里我以我的代码举例,from 镜像,这里你也能打包好一个镜像的基础上,from打好的镜像,这里我们用openj…

数据结构:阶段测试(查漏补缺)

目录 选择题: 题一: 题二: 题三: 题四: 编程题: 题一:左叶子之和 思路一: 题二:约瑟夫问题(用单链表实现) 思路一: 本人实…

DeepSpeed: 大模型训练框架 | 京东云技术团队

背景: 目前,大模型的发展已经非常火热,关于大模型的训练、微调也是各个公司重点关注方向。但是大模型训练的痛点是模型参数过大,动辄上百亿,如果单靠单个GPU来完成训练基本不可能。所以需要多卡或者分布式训练来完成这…

Linux--进程等待

1.什么是进程等待 1.通过系统调用wait/waitid,来对子进程进行进行检测和回收的功能。 2.为什么有进程等待 1.对于每个进程来说,如果子进程终止,父进程没有停止,就会形成僵尸进程,导致内存泄露,为了防止僵尸进程的形成…

【JAVA基础】多线程与线程池

多线程与线程池 文章目录 多线程与线程池1. 相关概念1.1 线程调度1.2 守护线程 2. 生命周期3. 同步机制/同步锁3.1 synchronized3.2 lock3.3 synchronized 与 Lock 的对比 4. 死锁5. 线程通信5.1 线程间的通信5.2 等待唤醒机制5.3 举例5.4 调用 wait 和 notify 需注意的细节5.5…

进阶课4——随机森林

1.定义 随机森林是一种集成学习方法,它利用多棵树对样本进行训练并预测。 随机森林指的是利用多棵树对样本进行训练并预测的一种分类器,每棵树都由随机选择的一部分特征进行训练和构建。通过多棵树的集成,可以增加模型的多样性和泛化能力。…

c++视觉检测------Shi-Tomasi 角点检测

Shi-Tomasi 角点检测 :goodFeaturesToTrack() goodFeaturesToTrack() 函数是 OpenCV 中用于角点检测的功能函数。它的主要作用是检测图像中的良好特征点,通常用于计算机视觉任务中的光流估算、目标跟踪等。 函数签名: void goodFeaturesTo…

pytorch实战---IMDB情感分析

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

Pytorch公共数据集、tensorboard、DataLoader使用

本文将主要介绍torchvision.datasets的使用,并以CIFAR-10为例进行介绍,对可视化工具tensorboard进行介绍,包括安装,使用,可视化过程等,最后介绍DataLoader的使用。希望对你有帮助 Pytorch公共数据集 torc…

vscode安装可以打开docx文件的插件

文章目录 vscode安装可以打开docx文件的插件去插件商城搜索并安装安装后打开一个word vscode安装可以打开docx文件的插件 去插件商城搜索并安装 安装后 打开一个word

脏牛提权 liunx

使用方法 Liunx 普通用户 内核版本 在版本里 我直接脏牛提权 有脚本查看内核版本 上传c脚本 编译 直接执行 获取高权限 提权 Liunx https://github.com/InteliSecureLabs/Linux Exploit Suggester 运行这个脚本 上传到客户端 https://github…

Unity Hub报错:No valid Unity Editor license found. Please activate your license.

最近 遇到一个问题,打开高版本时Hub抛出异常:No valid Unity Editor license found. Please activate your license. 首先你必须排除是否登录Unity Hub,并且激活许可证。 方法一:禁用网络(这个可能无效) …

如何通过卖虚拟资料月入10万?看这几个卖资料案例

我微信好友里,有近4000个是做创业博主的同行。 你可能会好奇,其中60%的人都通过卖虚拟资料起家,这到底说明了什么呢? 嗯,事实上,这就意味着这些人选择了网络赚钱的首选项目,那就是销售各种资料…

python selenium如何带cookie访问网站

python selenium如何带cookie访问网站 要使用Python的Selenium库带有cookie访问网站,你可以按照以下步骤进行操作: 一、流程介绍 安装Selenium库(如果尚未安装): pip install selenium导入Selenium库并启动一个浏览…