echarts学习: 图表自适应

1.实现基本功能

我最近在研究如何封装echarts组件,几乎每个相关的文章都会给组件添加图表自适应的功能。其原理也很简单,就是通过侦听windowresize事件,当事件触发时就调用chartInstance.resize方法重置图表尺寸。

基本代码如下:

// 重置图表尺寸
function resize() {
  instance.value &&
      instance.value.resize({
        animation: {
          duration: 300,
        },
      })
}

onMounted(() => {
  window.addEventListener('resize',resize)
})
onUnmounted(() => {
  window.removeEventListener('resize',resize)
})

2.使用防抖优化自适应函数

因为这里涉及到了resize事件,为了保证前端的性能,建议对自适应函数进行防抖处理。

什么是防抖?

概念

防抖是指当函数在一定时间内被频繁触发的时候,为了保证前端性能和用户体现,只执行最后一次的触发。

实现原理

当函数被触发时,将其放入一个计时器中,等到期后再执行函数。在计时器到期之前,如果函数被重复触发,就清除之前的计时器并重新开始计时。

适用场景

resizescroll、输出框内容校验等操作。

防抖与节流的区别

在我看来防抖和节流的区别在于:防抖执行规定时间内函数的最后一次触发;节流执行规定时间内函数的第一次触发。

那么哪些函数应该防抖?哪些又应该节流呢?

我认为在规定的时间内,重复执行结果相同的函数应该节流;重复执行结果不同的函数应该防抖。

我使用了Loash中的debounce方法来实现防抖。

import { debounce } from 'lodash-es'
// 重置图表尺寸
function resize() {
  instance.value &&
    instance.value.resize({
      animation: {
        duration: 300,
      },
    })
}

// 进行防抖处理
const debounceResize = debounce(resize, 300, { maxWait: 800 })

onMounted(() => {
  window.addEventListener('resize', debounceResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', debounceResize)
})

3.误入歧途

在实现了上述的“自适应”之后,我就进行了测试,我满以为加上了上面的代码我的图表的尺寸就会跟着窗口尺寸的变化而变化,可结果却让我大跌眼镜。

可以看到,我改变浏览器窗口的尺寸,但图表的尺寸却不会变化。

在经过这个挫折之后,我开始停下来思考。我发现自己之前对“自适应功能”的理解是错误的。我之前的理解如下:

实际上上述理解存在一个严重的错误,那就是:窗口尺寸的变化和图表尺寸的变化有什么关系?它们其实没有直接联系。

正确的逻辑应该如下图所示,窗口尺寸的变化导致容器尺寸的变化,然后再调用chartInstance.resize方法改变图表的尺寸。

而在我之前的代码中将容器的尺寸设置为固定值,因此无论窗口的尺寸怎么变化,容器的尺寸都不会变,进而图表的尺寸也不会变。因此想要实现图表自适应,除了echarts组件中的相关代码外,还需要项目本身有自适应的方案(例如,基于rem或者scale的方案)。

当然最简单的方法,我们只需要将容器的尺寸设置为相对单位vw/vh就可以体验图表自适应的效果了。

  <div ref="container" style="width: 60vw; height: 50vh;"></div>

4.使用ResizeObserver代替resize事件

在经过了反思之后,我发现自己之所以会出现之前的错误理解大致有两个方面的原因。

一方面是因为我个人的不求甚解,没有去仔细的思考图表自适应的原理,只是机械的模仿别人的写法。

另一方面也是因为我在一定程度上被误导了,目前我所看到的所有文章中都是直接侦听windowresize事件,实际上我认为准确的讲不应该侦听window的尺寸变化,而是应该侦听容器的尺寸变化。

那么问题来了,怎么侦听元素的尺寸变化呢?元素可没有resize事件。

答案是可以使用ResizeObserver元素尺寸侦听器,ResizeObserver 接口可以监听 Element 或者 SVGElement 边界尺寸的变化。其详细用法请参考MDN中与ResizeObserver的相关文档。

接着使用ResizeObserver重写自适应相关的代码:

import { debounce } from 'lodash-es'
// 重置图表尺寸
function resize() {
  instance.value &&
    instance.value.resize({
      animation: {
        duration: 300,
      },
    })
}

// 进行防抖处理
const debounceResize = debounce(resize, 300, { maxWait: 1000 })

let resizeObserver = new ResizeObserver(debounceResize)

onMounted(() => {
  init()
  resizeObserver.observe(container.value)
})
onUnmounted(() => {
  instance.value?.dispose()
  resizeObserver.disconnect()
  resizeObserver = null
})

参考资料

  1. Documentation - Apache ECharts
  2. lodash.debounce | Lodash中文文档 | Lodash中文网
  3. JS—节流与防抖_js节流防抖-CSDN博客
  4. ResizeObserver - Web API | MDN

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何快速上手Python,成为一名数据分析师

目录 写在前面 推荐图书 推荐理由 粉丝福利 写在最后 写在前面 520快乐&#xff01;喜欢Python的小伙伴有福啦&#xff0c;本期博主给大家推荐一本入门Python的热门书籍&#xff0c;快来看看吧~ 推荐图书 《Python数据分析快速上手》(王靖&#xff0c;商艳红&#xff0…

基础数学内容重构(后缀0个数)

今天也是参加了一下宁波大学的校赛&#xff0c;其中有一道题是求后缀0的个数&#xff0c;题意是让我们求一下式子的后缀0个数&#xff1a; 看上去比较复杂&#xff0c;但是通过化简我们可以知道以上式子就是求&#xff08;n 1&#xff09;&#xff01;&#xff0c;这里化简的过…

【学习笔记】Vue3(Ⅰ)

Vue3(Ⅰ) 1、 概述 1.1、概述 1.2、使用 Vite 创建工程 1.2.1 Vite 介绍 1.2.2 创建工程 1.3、项目文件结构2、 基础 2.1、setup 2.1.1 初识 setup 2.1.2 setup 的返回值 2.1.3 setup 的触发时机…

Matlab2010安装注册+激活(保姆级教程)

目录 一、软件安装 二、软件激活 三、软件测试 Matlab2010压缩包: 链接&#xff1a;https://pan.baidu.com/s/1bX4weZ0nC-4zlDLUiSKcRQ?pwdxljj 提取码&#xff1a;xljj 一、软件安装 1.解压所给压缩包&#xff0c;目录双击setup.exe打开. (如果用户名为中文则会遇到这个…

HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】

1.部署BGP/MPLSIP VPN时,当两个VPN有共同的站点,则该共同站点一定不能与两个VPN其他站点使用重叠的地址空间。 2.如图所示&#xff0c;运营商BGP/MPLSIP VPN骨干网通过LDP构建LSP&#xff0c;若想实现用户X两个站点之间通过BGP/MPLSIP VPN网络互通&#xff0c;则PE1和PE2之间必…

Flutter开发效率提升1000%,Flutter Quick教程之对被遮挡的组件进行编辑

1&#xff0c;有些时候&#xff0c;有的widget会被其他widget所遮挡&#xff0c;那么&#xff0c;我们如何选中被遮挡的Widget?如下面这张图。上面是一个Text&#xff0c;外面包裹着一个Container&#xff0c;这时候点击事件会被Text所拦截&#xff0c;那么&#xff0c;如何选…

腾讯 InstantMesh,单图生成 3D 模型,10 秒内完成,性能超越 SOTA

前言 近年来&#xff0c;3D 内容创作在游戏、动画、虚拟现实等领域发挥着越来越重要的作用。然而&#xff0c;传统的 3D 模型制作流程繁琐&#xff0c;需要专业人员花费大量时间和精力。为了简化 3D 内容创作流程&#xff0c;腾讯 ARC 实验室推出了 InstantMesh&#xff0c;一…

Python课设-学生信息管理系统

一、效果展示图 二、前端代码 1、HTML代码 <1>index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

C语言(内存函数)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#xff0c;在这里撰写成文一…

Python魔法之旅-魔法方法(10)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…

【Python系列】Python的多返回值

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

ClickHouse 使用技巧总结

文章目录 数据导入、导出技巧外部文件导入导技巧使用集成表引擎导入、导出数据 建表技巧表引擎选择技巧分区键选择技巧数据结构选择技巧分区技巧 高级技巧物化视图投影位图变更数据捕获 常见报错及处理方法 数据导入、导出技巧 外部文件导入导技巧 ClickHouse作为OLAP即席分析…

opencv-python(二)

马赛克 img cv2.imread(./bao.jpeg)print(img.shape)img2 cv2.resize(img,(35,23))img3 cv2.resize(img2,(900,666))cv2.imshow(bao,img3)cv2.waitKey(0)cv2.destroyAllWindows()img2 cv2.resize(img, (90,66))img3 np.repeat(img2, 10, axis 0) # 重复行img4 np.repeat(…

I2C LCD1602液晶显示屏

前言 本文实现在 LCD1602显示屏的使用。 显示屏使用带I2C转接板的,如下图所示。 并且会做一些有趣的显示方式。 效果预览 材料准备 材料数量价格Arduino nuo118杜邦线411602A显示屏110 依赖库下载 本文使用都库在 arduino ide 中搜索 LiquidCrystal_I2C 即可找到。 注意作…

混合动力电动汽车介绍(一)

电动汽车发展的技术背景主要包含环境问题和能源问题两大方面。环境问题的表现形式为空气污染&#xff0c;而能源问题的表现形式为现有能源供应体系对化石燃料的过分依赖。《新能源汽车产业发展规划&#xff08;2021-2035&#xff09;》中明确我国新能源汽车技术研发的“三纵”、…

kivy.garden.matplotlib

matplotlib 是什么 # pip install matplotlib2.2.2 from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg FigureCanvasKivyAgg class FigureCanvasKivyAgg(FigureCanvasKivy, FigureCanvasAgg):FigureCanvasKivyAgg class. See module documentation f…

SickOS1.1 - Shellshock原理和利用过程精讲

SickOS1.1的另一种思路&#xff1b;用另一种方法打透这台机器 Nikto扫描 正常都是-h扫描&#xff1b;有代理就用-useproxy 指向的代理ip:端口 nikto -h 192.168.218.157 -useproxy 192.168.218.157:3128apache版本&#xff0c;有点低&#xff0c;现在都是2.4.54版本了&#x…

Cobaltstrike常用功能

一、快捷工具栏 3、需要创建监听器&#xff0c;才能让靶机上线&#xff0c;连接我们公网服务端上去开启的帧监听端口&#xff0c;做任何操作 都是通过服务器的IP地址去连接靶机&#xff0c;去和靶机进行文件stage的一个传输和交互。这里推荐把cs 放到公网上边&#xff0c;比较…

通过LabVIEW提升生产设备自动化水平

现代制造业对生产设备的自动化水平提出了越来越高的要求。使用LabVIEW这一强大的图形化编程环境&#xff0c;可以显著提升生产设备的自动化程度&#xff0c;改善生产效率和产品质量。本文将详细分析如何通过LabVIEW改善生产设备的自动化水平&#xff0c;并提供具体的实施策略与…

数论1---整除

概念与基本性质就不说了 例题1&#xff1a;已知a|n&#xff0c;b|n.且axby1,求证&#xff1a;ab|n 即&#xff1a; 所以&#xff1a;ab|n 例题2&#xff1a;设m是一个大于2的正整数&#xff0c;证明&#xff1a;对于任意正整数n&#xff0c;都有 由于我不想打公式了直接拍照…