Echarts遇到Vue3时遇到的问题

2023-10-26

将vue2的Echarts代码迁移到了vue3项目上,引发的问题

问题描述:

1. 点击图例legend时刻度轴偏移,图像不展示,以及报错

 初始chart正常.图

点击图例后的chart和报错.图

2. 调用resize()不生效且报错

初始正常.图

修改屏幕尺寸调用resize及报错.图

解决

Vue3使用了proxy,Echarts无法从中获取内部变量;所以在保存echarts实例时,不要使用ref、reactive。

应该使用shallowReactive、shallowRef、不使用响应式

// 正确代码

// shallowRef
const myCharts = shallowRef(null);
myCharts.value = echarts.init(dom);
myCharts.value.resize();

// shallowReactive
const state= shallowReactive({myCharts: null});
state.myCharts = echarts.init(dom);

// 不使用响应式
let myCharts = null;
myCharts= echarts.init(dom);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts遇到Vue3时遇到的问题 的相关文章

随机推荐

  • 【华为OD统一考试B卷

    文章目录 题目描述 输入描述 输出描述 用例 C java javascript python 题目描述 对一个数据a进行分类 分类方法为 此数据a 四个字节大小 的四个字节相加对一个给定的值b 取模 如果得到的结果小于一个给定的值c 则数
  • HDOJ 1827 - Summer Holiday 简单的tarjan求强联通分量+缩点

    题意 听说lcy帮大家预定了新马泰7日游 Wiskey真是高兴的夜不能寐啊 他想着得快点把这消息告诉大家 虽然他手上有所有人的联系方式 但是一个一个联系过去实在太耗时间和电话费了 他知道其他人也有一些别人的联系方式 这样他可以通知其他人 再
  • MMOCR之DBNET文字检测

    MMCV系列之MMOCR 注 大家觉得博客好的话 别忘了点赞收藏呀 本人每周都会更新关于人工智能和大数据相关的内容 内容多为原创 Python Java Scala SQL 代码 CV NLP 推荐系统等 Spark Flink Kafka
  • R语言入门(安装使用基础操作详细说明)合集

    R使用基础知识 Rstudio使用 R包管理 操作数据 空间数据处理 在jupyternotebook中使用R语言 参考博客 Rstudio使用 ctrl enter运行当前行代码 help中查找说明文档 查看前后绘图图片 工作目录设定及管
  • Android音视频任务列表之(一)——在 Android 平台绘制一张图片,使用至少 3 种不同的 API,ImageView,SurfaceView,自定义 View

    一 使用ImageView绘制图片 1 在布局文件中添加ImageView控件
  • 云原生环境 - Dockerfile挂载nfs盘【真实案例】

    文章目录 背景 解决 第1步 搭建NFS Server 第2步 调整Dockerfile 安装nfs utils 第3步 设置privileged权限 参考 背景 项目中使用RainBond 基于Kubernetes的云原生平台 部署相关微
  • 干货

    作者 李家丞 同济大学数学系本科在读 现格灵深瞳算法部实习生 近年来 深度学习模型逐渐取代传统机器视觉方法而成为目标检测领域的主流算法 本系列文章将回顾早期的经典工作 并对较新的趋势做一个全景式的介绍 帮助读者对这一领域建立基本的认识 营长
  • 数据库知识点总结(一)

    第一章 绪论 重点 掌握关系数据模型的相关概念 数据库系统三级模式和两层映像的体系结构 数据库系统的逻辑独立性和物理独立性等 难点 本章的难点是需要掌握数据库领域大量的基本概念 此 外 数据模型及数据库系统的体系结构也是本章的难点 1 1
  • 三个C语言中字符转换的函数

    wcstombs 将宽字符转换成多字符 mbstowcs 把多字符转换成宽字符 Setlocale 本函数用来配置地域的信息 设置当前程序使用的本地化信息 使中文路径生效的函数
  • 【RuoYi-Vue-Plus】学习笔记 08 - Mybatis Plus 分页插件实现分页功能

    文章目录 前言 参考目录 代码分析 1 分页构建使用 1 1 构建分页参数 2 分页插件 paginationInnerInterceptor 2 1 分页溢出处理 overflow 2 2 单页条数限制 maxLimit 前言 前段时间框
  • 阿里资深架构师答疑:数据湖概相关念、特征、架构与案例

    写在前面 最近 数据湖的概念非常热 许多前线的同学都在讨论数据湖应该怎么建 阿里云有没有成熟的数据湖解决方案 阿里云的数据湖解决方案到底有没有实际落地的案例 怎么理解数据湖 数据湖和大数据平台有什么不同 头部的云计算玩家都各自推出了什么样的
  • 华为OD机试 - 乱序整数序列两数之和绝对值最小(Java)

    题目描述 给定一个随机的整数 可能存在正整数和负整数 数组 nums 请你在该数组中找出两个数 其和的绝对值 nums x nums y 为最小值 并返回这个两个数 按从小到大返回 以及绝对值 每种输入只会对应一个答案 但是 数组中同一个元
  • 1.16 I/O文件的读、写操作(open方式打开文件)

    存在一个hello txt文件 内容如下截图 打开文件的语句是 file open file name access mode file name代表文件名 文件的全路径 access mode代表打开文件的模式 文件各个模式如下 一 文件
  • arm-linux-androideabi 和 arm-linux-gnueabi

    编译环境 ubuntu18 04 软件版本 全志SDK 安卓版本8 1 0 linux 4 9 0 问题描述 在全志的安卓系统中 需要运行C项目代码 在查找交叉编译工具时 shell里直接arm tab出来的是arm linux andro
  • sql查询每个学生的最高成绩mysql语句

    张三 语文 100 张三 数学 83 李四 语文 88 李四 数学 100 查询每个学生的最高成绩 select b from select name max score score from course GROUP BY name a
  • 微信小程序调用域名服务器的服务

    微信小程序得益于它的简单便捷 在日常生活中应用的很普遍 做过开发的同学都知道 微信的前端比较简单易懂 并且微信自带云开发 提供云存储 可以满足一些商家或者自媒体的需求 如果企业类的用户使用小程序 数据是存在企业自己的服务器上 小程序也提供了
  • echarts的展示区域地图,添加纹理图片

    echarts的展示区域地图 添加纹理图片 下面我们以广西南宁的来做实例 来进行这个渲染和添加纹理图片的操作 首先我们先看看文档 echarts 的geo的areaColor是可以支持通过图片来对地图的区域内容来进行纹理填充的 也可以进行颜
  • 操作系统笔记整理10——输入输出系统(2)

    点此链接可跳转到 操作系统笔记整理 目录索引页 参考书籍 计算机操作系统 第四版 汤小丹等编著 文章目录 点此链接可跳转到 操作系统笔记整理 目录索引页 用户层I O软件 系统调用 库函数 假脱机 Spooling 系统 SPOOLing的
  • vue同意本站协议的制作

    div p msg p h5 表单提交 h5 div
  • Echarts遇到Vue3时遇到的问题

    将vue2的Echarts代码迁移到了vue3项目上 引发的问题 问题描述 1 点击图例legend时刻度轴偏移 图像不展示 以及报错 初始chart正常 图 点击图例后的chart和报错 图 2 调用resize 不生效且报错 初始正常