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

news/2025/2/14 2:13:34/

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.ppmy.cn/news/1466068.html

相关文章

PLC远程调试

随着工业自动化的快速发展,PLC(可编程逻辑控制器)已经成为现代工业生产线的核心控制设备。然而,传统的PLC调试方式往往受限于地理位置和物理连接,使得工程师在调试过程中面临诸多不便。在这个背景下,HiWoo …

【Python内功心法】:深挖内置函数,释放语言潜能

文章目录 🚀一、常见内置函数🌈二、高级内置函数⭐1. enumerate函数👊2. eval函数❤️3. exec函数💥4. eval与exec 中 globals与locals如何用☔4-1 globals 参数🎬4-2 locals 参数 ❤️5. filter函数👊6. z…

顶底背离的终极猜想和运用

这几天圈内都在传底蓓离什么的。作为严肃的量化自媒体,我们就不跟着吃这波瓜了。不过,我一直很关注技术指标的顶背离和底背离,一直在追问它的成因如何,以及如何预测。 底蓓离把我目光再次吸引到这个领域来,于是突然有…

RabbitMQ-直连交换机(direct)使用方法

RabbitMQ-默认读、写方式介绍 RabbitMQ-发布/订阅模式 目录 1、概述 2、直连交换机 3、多重绑定 4、具体代码实现 4.1 生产者部分 4.2 消费者部分 5、运行代码 6、总结 1、概述 直连交换机,可以实现类似路由的功能,消息从交换机发送到哪个队列…

基于字典树可视化 COCA20000 词汇

COCA20000 是美国当代语料库中最常见的 20000 个词汇,不过实际上有一些重复,去重之后大概是 17600 个,这些单词是很有用,如果能掌握这些单词,相信会对英语的能力有一个较大的提升。我很早就下载了这些单词,…

JVM(内存区域划分、类加载机制、垃圾回收机制)

目录 一. 内存区域划分 1.本地方法栈(Native Method Stacks) 2.虚拟机栈(JVM Stacks) 3.程序计数器(Program Counter Register) 4.堆(Heap) 5.元数据区(Metaspace) 二.类加载机制 1.加载 2.验证 3.准备 4.解析 5.初始化 "双亲委派模型" 三. GC 垃圾回收…

什么是PYTHONPATH?它在Python中有什么作用

PYTHONPATH 是一个环境变量,用于在 Python 中指定额外的搜索路径,以便 Python 解释器可以找到要导入的模块和包。在 Unix-like 系统(如 Linux 和 macOS)以及 Windows 系统上,都可以设置和使用 PYTHONPATH。 当你在 Py…

MATLAB误差估计扩展卡尔博斯方法的目录大纲

MATLAB误差估计扩展卡尔博斯方法的目录大纲 目录: 一、引言 1.1 背景介绍 1.2 研究意义 二、基本理论 2.1 误差估计的基本概念 2.2 卡尔博斯方法的基本原理 三、MATLAB误差估计扩展卡尔博斯方法 3.1 MATLAB简介 3.2 MATLAB在误差估计中的应用 3.3 MATLAB扩展卡尔…