vue2 实现echarts图表进入可视区域后再加载动画,以及 使用了resize之后,动画失效问题解决

Intersection Observer API 是一个现代的浏览器 API,用于监测一个或多个目标元素与其祖先元素或视窗(viewport)之间的交叉状态(intersection)的变化。它可以有效地监听元素是否进入或离开可视区域,从而实现一些懒加载、无限滚动、图表加载等需求。 

主要特点和用途:

  1. 懒加载(Lazy Loading):当页面中的某些元素在可视区域内时再加载它们,以提升页面加载速度和性能。

  2. 无限滚动(Infinite Scrolling):当滚动到页面底部时加载更多内容,实现无限滚动列表或分页加载。

  3. 图表加载:在图表或其他数据可视化组件进入可视区域时再触发加载动画或数据更新。

  4. 广告展示:监测广告是否被用户看到,从而统计广告的曝光量

使用方法:
1、创建 IntersectionObserver 实例:
var observer = new IntersectionObserver(callback, options);
callback 是一个回调函数,用于处理交叉状态的变化。
options 是一个配置对象,可以设置 root(祖先元素)、rootMargin(边界)、thresholds(阈值)等参数。2、观察目标元素:observer.observe(target);3、处理交叉状态变化:
var callback = function(entries, observer) {entries.forEach(entry => {if (entry.isIntersecting) {// 处理目标元素进入可视区域的逻辑} else {// 处理目标元素离开可视区域的逻辑}});
};4、停止观察:observer.unobserve(target);

 主要属性和方法:

  • isIntersecting:表示目标元素是否与根元素(root)或视窗(viewport)相交。
  • intersectionRatio:表示目标元素的可见比例,取值范围为 0 到 1。
  • root:观察器的根元素,即相对于该元素来计算交叉状态,默认为视窗。
  • rootMargin:边界,可以设置在计算交叉状态时扩展或缩小根元素的大小。
  • thresholds:阈值数组,用于指定交叉比例的阈值,当目标元素的交叉比例超过指定的阈值时触发回调。

Intersection Observer API 的主要优势在于它可以高效地监测大量元素的交叉状态变化,而无需频繁地监听滚动事件或手动计算元素位置,从而提升了性能和用户体验。

  mounted () {await this.getInitDataFun() //  数据this.$nextTick(() => {this.getEchartData() // 绘制图表})},methods: {// 获取数据 处理图表需要的datagetInitDataFun () {return new Promise(async (resolve, reject) => {........})},getEchartData () {const salesTrendDom = this.$refs.salesTrendRef //销售额const orderCustomerDom = this.$refs.orderCustomerRef //下单客户数趋势// 销售额if (salesTrendDom) {this.loadAnimationFun(salesTrendDom, 'salesTrendOption')}//下单客户数趋势if (orderCustomerDom) {this.loadAnimationFun(orderCustomerDom, 'orderCustomerOption')}},// 加载动画loadAnimationFun (dom, option) {let myChart = this.$echarts.init(dom)var observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {// 加载动画myChart.setOption(this[option])this.addLoadEvent(myChart.resize) //添加 监听屏幕缩放setTimeout(function () {// 使用了resize之后,动画失效,这是echarts5的bug,echarts4不会  动画在这里加就好了myChart.resize({animation: {duration: 1800,easing: 'ease-in-out'}})}, 1)// 停止观察图表observer.unobserve(entry.target)}})})// 观察图表元素observer.observe(myChart.getDom())},addLoadEvent (fn) {var old = window.onresizeif (typeof window.onresize != 'function') {//防止多个window.onresize   冲突  解决window.onresize = fn} else {window.onresize = function () {old()setTimeout(function () {//个别时候无法刷新echarts 延迟1MS  解决fn()}, 1)}}}
}

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

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

相关文章

【氮化镓】AlGaN/GaN HEMTs沟道温度测量

文章是关于AlGaN/GaN HEMTs(高电子迁移率晶体管)在不同基底(如蓝宝石和硅)上生长时,通过直流(DC)特性方法确定沟道温度的研究。文章由J. Kuzmk, P. Javorka, A. Alam, M. Marso, M. Heuken, 和 …

UWB人员实时定位系统,Spring boot +Vue框架开发的UWB源码

UWB定位技术最核心的优势就是定位精度,可达厘米级,是其它定位技术的成百上千倍,在此精度下,可以满足绝大多数行业精细化管理的需求。 有了精准的位置数据,就可以把人员和物资的轨迹进行数据化还原,通过人工…

改造BeanUtils,优雅实现List数据拷贝

BeanUtils.copyProperties();确实为我们做了很多事情,虽然不能完美完成深拷贝,但是对于 po、vo、dto 的拷贝已经足够用了。可还是有一些不够完美的地方。 不足几点如下: ①. 不能拷贝 list,而拷贝 list 的情况又大量存在&#x…

C++中读取文件模拟视频流并使用回调函数处理数据

C中读取文件模拟视频流并使用回调函数处理数据 flyfish 在 C 中&#xff0c;回调函数通常以函数指针、函数对象&#xff08;包括 std::function&#xff09;、成员函数指针或 Lambda 表达式的形式来实现。这里使用了 std::function<void(const std::vector<char>&am…

爬虫自动调用shell通过脚本运行scrapy爬虫(crawler API)

一、爬虫时如何同时调用shell 1)终端cd项目>>scrapy crawl example 2)打开example.py import scrapy from scrapy.shell import inspect_response#引入shellclass ExampleSpider(scrapy.Spider):name "example"allowed_domains ["example.com"]…

使用WSGI服务器在生产环境中运行Flask应用程序

文章目录 一、问题描述二、解决思路1、使用Gevent的WSGIServer2、使用WSGIRef的WSGIServer 一、问题描述 在开发Flask应用程序时&#xff0c;有时会在终端看到以下警告信息&#xff1a; WARNING: This is a development server. Do not use it in a production deployment. U…

从0开始学习制作一个微信小程序 学习部分(2)json文件的说明与app.json文件的操作

系列文章目录 本文是小程序制作系列的学习篇的第二篇 学习篇第一篇我们讲了编译器下载&#xff0c;项目、环境建立、文件说明与简单操作&#xff1a;第一篇链接 本篇将继续讲解一些基础的编码&#xff0c;分析json文件的作用,着重讲解app.json里可以对小程序进行的切换页面&am…

小米金融守护消费权益,共筑金融和谐新篇章

随着金融市场的日益成熟&#xff0c;金融消费者的权益保护问题逐渐受到广泛关注。作为金融服务体系中的重要一环&#xff0c;保护消费者权益不仅是金融机构的基本职责&#xff0c;更是其长远发展的基石。小米金融聚焦于金融消费者权益保护&#xff0c;通过梳理典型案例&#xf…

C语言初阶--指针

文章目录 1. 指针是什么?2. 指针和指针类型2.1. 指针类型2.2. 指针类型的意义 3. 野指针3.1. 野指针成因3.1.1. 未初始化3.1.2. 超过数组范围,越界访问3.1.3. 指针指向的空间释放 3.2. 规避野指针 4. 指针运算4.1. 指针-整数4.2. 指针 - 指针4.3. 指针的关系运算 5. 指针和数组…

Blender常见操作

1.局部视图&#xff1a;Local View&#xff0c;也可称作Solo模式&#xff0c;按快捷键 “/”进入&#xff0c;在按退出&#xff0c;只显示选中的物体&#xff08;可多选&#xff09;&#xff0c;方便编辑 2.物体合并&#xff1a;Ctrl J 其中&#xff0c;当选中多个物体时&am…

二、VLAN原理和配置

vlan不是协议&#xff0c;是一个技术&#xff0c;虚拟局域网技术&#xff0c;基于802.1q协议。 vlan&#xff08;虚拟局域网&#xff09;&#xff0c;将一个物理的局域网在逻辑上划分成多个广播域的技术。 目录 1.冲突域和广播域 概念 范围 2.以太网帧格式 3.以太网帧封装…

Python基础:【扩展系列】Python对小程序或App进行自动化操作常用框架

Python可以用来实现对小程序或App的自动化操作,这通常涉及使用专门的自动化测试和操作工具。 常用框架 以下是一些常用的工具和框架: Appium: Appium 是一个开源工具,用于自动化移动应用程序的测试,包括原生应用、移动网页应用和混合应用。它支持iOS、Android和Windows应…

【酱浦菌-爬虫项目】四种方法爬取百度首页信息

项目原理&#xff1a; 首先&#xff0c;定义了四个函数&#xff0c;每个函数都有不同的功能&#xff1a; func1()&#xff1a;发送一个GET请求到百度网站&#xff0c;并获取响应内容&#xff0c;演示如何使用requests库来获取网页内容。 func2()&#xff1a;发送一个GET请求到…

字节5面挂,恶心到了。。。

字节五面 今天脉脉看到一篇帖子&#xff1a; 楼主是 tx 的前员工&#xff0c;在字节五面&#xff08;加轮&#xff09;被挂后&#xff0c;认定&#xff08;或许私下做了一些调查&#xff09;是字节 HR 向 tx 背调&#xff0c;然后被前同事捏造虚假信息&#xff0c;导致的面试失…

分类规则挖掘(一)

目录 一、分类问题概述&#xff08;一&#xff09;分类规则挖掘&#xff08;二&#xff09;分类规则评估&#xff08;三&#xff09;分类规则应用 二、k-最近邻分类法 一、分类问题概述 动物分类&#xff1a;设有动物学家陪小朋友林中散步&#xff0c;若有动物突然从小朋友身边…

【Linux】yum、vim

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/qinjh_/category_12625432.html 目录 Linux 软件包管理器 yum 什么是软件包 查看软件包 如何安装软件 如何卸载软…

机器学习:基于Sklearn、XGBoost框架,使用逻辑回归、支持向量机和XGBClassifier来诊断并预测一个人是否患有自闭症

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…

清理 Conda 和 pip 缓存

清理 Conda 缓存 查看 Conda 缓存的使用情况 conda clean --dry-run --all 删除不再使用的包和缓存 conda clean --all 清理 pip 缓存 Python缓存文件的默认位置&#xff1a; Windows 10&#xff1a;C:\Users\username\AppData\Local\pip\Cache macOS&#xff1a;/Users/…

JAVA系列 小白入门参考资料 继承

目录 1. 为什么需要继承 2. 继承的概念 3. 继承的语法 4. 父类成员访问 4.1 子类中访问父类的成员变量 1. 子类和父类不存在同名成员变量 2. 子类和父类成员变量同名 4.2 子类中访问父类的成员方法 1. 成员方法名字不同 2. 成员方法名字相同 ​5. super关键字 …

Kubernetes学习笔记06

第十六章、Kubernetes容器交付介绍 如何在k8s集群中部署Java项目 容器交付流程 开发代码阶段 编写代码编写Dockerfile【打镜像做准备】持续交付/集成 代码编译打包制作镜像上传镜像仓库应用部署 环境准备PodServiceIngress运维 监控故障排查应用升级 k8s部署Java项目流程 …