解决 vue3 中 echarts图表在el-dialog中显示问题

server/2024/12/26 18:39:18/

原因:

第一次点开不显示图表,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有100px,但是明明已经设置样式宽高100%

在这里插入图片描述
这可能是由于 el-dialog 还没有完全渲染完成,而你的 echarts 组件已经开始尝试渲染图表了。你可以尝试使用 v-if 或者 v-show 来控制 echarts 组件的渲染时机,使其只在 el-dialog 完全渲染完成后才进行渲染(翻译过来就是加个定时器)。

解决:

javascript"><ZyfChart v-if="echartsType"></ZyfChart> // 引用封装的Echarts组件时添加 v-if 判断
let echartsType = ref(false) // 初始设置为false
onMounted(() => {setTimeout(() => {echartsType.value = true// 添加setTimeout,设置echartsType 为true}, 100)
})

http://www.ppmy.cn/server/153402.html

相关文章

Elasticsearch-脚本查询

脚本查询 概念 Scripting是Elasticsearch支持的一种专门用于复杂场景下支持自定义编程的强大的脚本功能&#xff0c;ES支持多种脚本语言&#xff0c;如painless&#xff0c;其语法类似于Java,也有注释、关键字、类型、变量、函数等&#xff0c;其就要相对于其他脚本高出几倍的性…

未来网络技术的新征程:5G、物联网与边缘计算(10/10)

一、5G 网络&#xff1a;引领未来通信新潮流 &#xff08;一&#xff09;5G 网络的特点 高速率&#xff1a;5G 依托良好技术架构&#xff0c;提供更高的网络速度&#xff0c;峰值要求不低于 20Gb/s&#xff0c;下载速度最高达 10Gbps。相比 4G 网络&#xff0c;5G 的基站速度…

工厂常用软件系统大全中英文全称对照表及功能介绍应用场景ERP MES WMS SCADA IOT SAP等软件系统介绍

1. ERP&#xff08;Enterprise Resource Planning&#xff09;企业资源计划&#xff1a; ○ 功能&#xff1a;整合企业的各项资源和业务流程&#xff0c;涵盖从采购、生产到销售的各个环节。包括财务管理、生产计划、采购管理、库存管理、销售管理、人力资源管理等。 ○ 应用场…

vue3封装而成的APP ,在版本更新后,页面显示空白

一、问题展示 更新之后页面空白&#xff0c;打不开 &#xff0c;主要是由于缓存造成的 二、解决办法 1、随机数代码实现 使用随机数来动态的生成静态资源目录名可以避免浏览器缓存&#xff0c;但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大&#xff0c;可…

springboot 3 websocket react 系统提示,选手实时数据更新监控

构建一个基于 Spring Boot 3 和 WebSocket 的实时数据监控系统&#xff0c;并在前端使用 React&#xff0c;可以实现选手实时数据的更新和展示功能。以下是该系统的核心设计和实现思路&#xff1a; 1. 系统架构 后端 (Spring Boot 3): 提供 WebSocket 服务端&#xff0c;处理…

数据结构基本认识与必要知识点准备工作

什么是数据结构? 在一些特定的、特殊的需求场景下,我们以往所学的数据类型,无法基于需求合理地组织数据,此时就需要我们直接设计一套新的数据组织形式来解决问题,也就是数据结构. 主要学习内容 1.数据结构的内容: 线性表 队列 数组 树与二叉树 图 2.算法的内容: 查找 排…

flutter轮播图控件根据图片高度动态调整图高度

1.图片链接资源需要带有宽高信息 例如&#xff1a;https://zmkx.oss-cn-hangzhou.aliyuncs.com/oss/folder/atui2024-12-231734938007236a30cb975297842d0b3d2b82e4ec7f72b7unhmlcaj4el.jpg?Size1080x2388 在链接中拼接?Size1080x2388携带。 2.获取到数据后切割出宽高 List…

mac 使用 launchctl 实现每次登录系统时 frpc 就会自动启动

测试 测试正常是否可以启动 /Users/zhangbaoxing/SoftWare/frp_0.61.0_darwin_arm64/frpc -c /Users/zhangbaoxing/SoftWare/frp_0.61.0_darwin_arm64/frpc.toml步骤 launchctl 是根据plist文件的信息来启动任务的&#xff0c;所以我们要加一个frp的plist mac系统一般提供两…