echarts学习:将echats实例代理为响应式对象可能带来的风险

news2025/1/23 9:13:22

1.起源

最近我在学习如何封装echarts组件,我所参考的其中一篇博客中提到了一个“图表无法显示的问题”。

根据其中的介绍,造成此种问题的原因是因为,使用ref接受了echarts实例,使得echarts实例被代理为了响应式对象,进而影响了echarts对内部属性的访问。

2.实验

但遗憾的是,在封装和使用echats的过程中我还没有遇到过类似的问题,因此也无从判断问题的真假 ┓( ´∀` )┏

不过既然如此那我们真不妨来实验一下,在官方的Issue中,有贴出一些相关的问题情境,我选了其中的一个进行测试:

于是我准备了如下的一个带有tooltip提示框的折线堆叠图的配置项,将其传入我刚刚封装的echarts组件中。

const option = ref({
  title: {
    text: 'Stacked Line',
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
})

同时echarts实例依旧使用ref来进行接收

const instance = ref(null)

从下图中可以看到,当鼠标hover到图上时提示框真的没有出现

之后我用浅层式APIshallowRef代替原来的ref接收echarts实例。

const instance = shallowRef(null)

这样提示框就可以正常出现了

3.结论

基于我所看到的官方资料和我实验的结果,可以得出结论:当我们在Vue中将echarts实例代理为响应式对象时,可能会造成一系列的意外问题。

解决方法是(在Vue3中),避免使用refreactive接收echarts实例,应该使用普通变量,或者使用shallowRefshallowReactivemarkRaw等API。

参考资料

Vue3 封装 ECharts 通用组件_vue3如何封装echarts-CSDN博客

FAQ - Apache ECharts

响应式API: 进阶 | Vue.js

[Bug] Vue3 support seems not to behave correctly · Issue #17723 · apache/echarts

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

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

相关文章

【移动端】商场项目路由设计

1:路由设计配置: 一级路由配置 分析项目,设计路由,配置一级路由 一级路由:单个页面独立展示的,都是一级路由,例如:登录页面,首页架子,报错页面 二级路由&…

特征工程技巧——OneHot编码

我们以Kaggle比赛里面的一个数据集跟一个公开代码为例去解释我们的OneHot编码。 简单来说,独热编码是一种将类别型变量转换为二进制表示的方法,其中每个类别被表示为一个向量,向量的长度等于类别的数量,其中只有一个元素为1&…

STM32使用ST-LINK下载程序中需要注意的几点

使用keil5的ST-link下载界面 前提是ST-LINK已经连接好,(下图中是没有连接ST-link设备),只是为了展示如何查看STlink设备是否连接的方式 下载前一定设置下载完成后自启动 这个虽然不是必须,但对立即看到新程序的现象…

基于Chisel语言的FPGA流水灯程序

目录 一、 内容概要二、 Chisel介绍三、 Chisel的使用四、 流水灯实现五、 心得体会六、 参考链接 一、 内容概要 Chisel介绍Chisel使用流程Chisel流水灯实操 二、 Chisel介绍 Chisel 是一种构建硬件描述语言(HDL)的高级编程语言,它允许硬…

2020年CSP-J入门级第一轮初赛真题

一、选择题 在内存储器中每个存储单元都被赋予一个唯一的序号,称为()。 A.地址 B. 序号 C. 下标 D. 编号 答案:A. 地址 在内存储器中,每个存储单元都有一个唯一的标识,用于区分和访问不同的存储单元。这个唯…

Day10:平面转换、渐变色

目标:使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。 一、平面转换 1、简介 作用:为元素添加动态效果,一般与过渡配合使用。 概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)。 平面转换…

C语言(字符和字符串函数)2

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

今日分享丨按场景定制界面

遇到问题 我们在写文档或者代码时,会遇到需要书写重复或者类似内容的情况。快捷的做法是:先复制粘贴此相似内容,再修改差异。那么开发人员在设计界面的时候,也会遇到同类型的界面有重复的特性,比如报销类型的单据&…

PostgreSQL常用插件

PostgreSQL 拥有许多常用插件,这些插件可以大大增强其功能和性能。以下是一些常用的 PostgreSQL 插件: 性能监控和优化 pg_stat_statements 1.提供对所有 SQL 语句执行情况的统计信息。对调优和监控非常有用。 2.安装和使用: pg_stat_k…

picoLLM:大模型的量化魔术师 上

大模型技术论文不断,每个月总会新增上千篇。本专栏精选论文重点解读,主题还是围绕着行业实践和工程量产。若在某个环节出现卡点,可以回到大模型必备腔调重新阅读。而最新科技(Mamba,xLSTM,KAN)则提供了大模…

数字孪生在气象灾害防治中的重要贡献

数字孪生技术在气象灾害防治中正发挥着越来越重要的作用。数字孪生是指通过数字化方式在虚拟空间中构建与现实世界对应的虚拟模型,通过实时数据和模拟技术进行动态映射和交互。利用数字孪生技术,气象部门可以更高效、更精准地监测、预测和应对气象灾害&a…

四川景源畅信:抖音开店怎么做好运营?

在数字化时代的浪潮中,抖音作为一个流量巨大的社交平台,为许多商家提供了展示和销售产品的新舞台。但在这个充满竞争的平台上,如何做好店铺运营,吸引并留住顾客,成为了许多商家面临的挑战。接下来的内容将围绕如何在抖…

我与C++的爱恋:vector的使用

​ ​ 🔥个人主页:guoguoqiang. 🔥专栏:我与C的爱恋 ​ 文章目录 一、vector的简单介绍二、vector的使用构造函数遍历容器对容器的操作vector 的增删查改 一、vector的简单介绍 vector是表示可变大小数组的序列容器 就像数组…

去噪扩散概率模型在现代技术中的应用:图像生成、音频处理到药物发现

去噪扩散概率模型(DDPMs)是一种先进的生成模型,它通过模拟数据的噪声化和去噪过程,展现出多方面的优势。DDPMs能够生成高质量的数据样本,这在图像合成、音频生成等领域尤为重要。它们在数据去噪方面表现出色&#xff0…

打开C语言常用的内存函数大门(二)—— memmove()函数 (内含memmove的讲解和模拟实现)

文章目录 1. 前言2. memmove()函数2.1 memmove()函数与memcpy()函数的差异2.2 memmove()函数的原型2.3 memmove()函数的使用案例 3. memmove()函数的模拟实现4. 总结 1. 前言 在之前,我向大家介绍了C语言中的一个常用的内存函数memcpy函数。如果你还没看的话&#…

算法(十一)贪婪算法

文章目录 算法简介算法概念算法举例 经典问题 -背包问题 算法简介 算法概念 贪婪算法(Greedy)是一种在每一步都采取当前状态下最好的或者最优的选择,从而希望导致结果也是全局最好或者最优的算法。贪婪算法是当下局部的最优判断&#xff0c…

【UnityShader入门精要学习笔记】第十六章 Unity中的渲染优化技术 (下)

本系列为作者学习UnityShader入门精要而作的笔记,内容将包括: 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更,有始无终 我的GitHub仓库 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 减少需要处…

报表工具DataEase技术方案(一)

一、使用场景: 企业内部系统想要快速接入报表功能,但是局限于人力资源不足,不想沿用传统的前端后端开发模式,可以尝试使用开源报表工具 DataEase。 二、架构设计: 使用最简便的报表集成方式,通过DataEase…

越洗越黑”的Pandas数据清洗

引言 先来一个脑筋急转弯活跃一下枯燥工作日常,问:“什么东西越洗越黑?” 有没有猜到的?猜不到我告诉你吧! 答案是“煤球”。那么这个脑机急转弯跟我们要讨论的话题有没有关系呢? 嗯是的,还是沾…

2024年大屏幕互动源码+动态背景图和配乐素材+搭建教程

2024年大屏幕互动源码动态背景图和配乐素材搭建教程 php宝塔搭建部署活动现场大屏幕互动系统php源码 运行环境:PHPMYSQL 下载源码地址:极速云