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

原因:

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

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

解决:

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

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

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

相关文章

计算机网络习题( 第3章 物理层 第4章 数据链路层 )

第3章 物理层 一、单选题 1、下列选项中&#xff0c;不属于物理层接口规范定义范畴的是&#xff08; &#xff09;。 A、 接口形状 B、 引脚功能 C、 传输媒体 D、 信号电平 正确答案&#xff1a; C 2、在物理层接口特性中&#xff0c;用于描述完成每种功能的事件发…

Unity SpriteAtlasManager.atlasRequested趟坑

坑1 场景一加载&#xff0c;unity就触发了SpriteAtlasManager.atlasRequested&#xff0c;如果这时候没有设置SpriteAtlasManager.atlasRequested回调&#xff0c;就会触发这个告警&#xff1a; SpriteAtlasManager.atlasRequested wasnt listened to 解决这个很简单&…

通俗易懂!使用Excel和TF实现Transformer

本文旨在通过最通俗易懂的过程来详解Transformer的每个步骤&#xff01; 假设我们在做一个从中文翻译到英文的过程&#xff0c;我们的词表很简单如下&#xff1a; 中文词表&#xff1a;[机、器、学、习] 英文词表[deep、machine、learning、chinese] 先来看一下Transformer的…

智慧楼盘二维、三维组件融合 720三维全景可视化

本系统通过数字孪生技术&#xff0c;实现小区楼盘系统的可视化展示&#xff0c;整合楼盘内各个系统的数据源&#xff0c;将楼盘模型与房间模型、720三维全景图相结合&#xff0c;实现了从楼盘周边到室内布局的全方位展示&#xff0c;为购房者提供全方位的可视化信息。 整个项目…

adb无法连接到安卓设备【解决方案】报错:adb server version (40) doesn‘t match this client (41);

下载老版本Platformtools​​​​​​​​​​​​​​https://dl.google.com/android/repository/platform-tools_r28.0.2-windows.zip?hlzh-cn 替换原来的platform-tools文件夹即可。 问题原因分析&#xff1a;电脑端adb client版本&#xff08;41&#xff09;和安卓端adb …

QT QCombox QSS样式问题

/*combobox 样式*/ QComboBox#FileterComboBox,QComboBox#DateRangeComboBox{background-color: #262626; /* 背景颜色 */color: #e0e0e0; /* 文本颜色 */border-radius:16px;font-family: "Microsoft YaHei"; /* 文本字体族 */font-size: 18px; /* 文…

Unittest02|TestSuite、TestRunner、HTMLTestRunner、处理excel表数据、邮件接收测试结果

目录 八、测试套件TestSuite和测试运行器TestRunner 1、基本概念 2、创建和使用测试套件 3、 自动发现测试用例、创建测试套件、运行测试 4、生成html的测试报告&#xff1a;HTMLTestRunner 1️⃣导入HTMLTestRunner模块 2️⃣运行测试用例并生成html文件 九、unittest…

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点 结论及未来工作-Conclusions and future work研究总结未来研究方…

【已解决】pyinstaller打包ico图片报错:OSError: [WinError 225] 无法成功完成操作,因为文件包含病毒或潜在的垃圾软件。

起因&#xff1a; pyinstaller加上 --icon 参数打包时报错。 命令如下&#xff1a; 解决&#xff1a; 关闭 Windows 的病毒防护即可&#xff0c;步骤如下。 点屏幕右下角通知栏&#xff0c;进入“病毒和威胁防护”&#xff1a; 打开&#xff1a; 关闭实时保护&#xff08…

011-spring-整合三方框架的命名空间原理(重要)

根据context标签来学习了解 <context:property-placeholder location"jdbc.properties"/> <bean id"dataSource" class"com.alibaba.druid.pool.DruidDataSource"><property name"driver" value"${db.driver}&quo…

No.29 笔记 | CTF 学习干货

大家好呀&#xff01;我刚参加了美国线上CTF比赛&#xff0c;收获超多&#xff0c;特别感谢老师教我的干货知识。今天就和大家分享我的学习笔记。CTF像刺激冒险&#xff0c;有挑战有惊喜。 学习中我懂了很多知识技能&#xff0c;像密码学、Web安全、Misc题型等&#xff0c;它们…

sonarqube 安装及使用

一、官网参考地址 相关版本下载地址 配置全局变量 .bash_profileexport SONAR_HOME=/Users/jd/soft/sonar-scanner-6.2.1.4610 export PATH=$PATH:$SONAR_HOME/bin export SQ_HOST=http://127.0.0.1:9000/ export SQ_TOKEN=squ_dbb1913e095a92a727a918a9ba6b1af94b007748二、…

使用ArcGIS/ArcGIS pro绘制六边形/三角形/菱形渔网图

在做一些尺度分析时&#xff0c;经常会涉及到对研究区构建不同尺度的渔网进行分析&#xff0c;渔网的形状通常为规则四边形。构建渔网的方法也很简单&#xff0c;使用ArcGIS/ArcGIS Pro工具箱中的【创建渔网/CreateFishnet】工具来构建。但如果想构建其他形状渔网进行相关分析&…

Java实现观察者模式

一、前言 观察者模式&#xff0c;又称为发布订阅模式&#xff0c;是一种行为设置模式&#xff0c;允许对象之间建立一对多的依赖关系&#xff0c;这样当一个对象状态改变时&#xff0c;它的所有依赖者&#xff08;观察者&#xff09;都会收到通知并自动更新。 二、具体实现 …

pytorch MoE(专家混合网络)的简单实现。

专家混合&#xff08;Mixture of Experts, MoE&#xff09;是一种深度学习模型架构&#xff0c;通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络&#xff08;即子模型&#xff09;&#xff0c;然后根据门控网络&#xff08;gating network&#xff09;的输出…

NAT 技术如何解决 IP 地址短缺问题?

NAT 技术如何解决 IP 地址短缺问题&#xff1f; 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 随着互联网的普及和发展&#xff0c;IP 地址的需求量迅速增加。尤其是 IPv4 地址&…

7-9 二分查找字符

目录 题目描述 输入格式: 输出格式: 输入样例: 输出样例: 详细代码&#xff08;手写二分&#xff09;&#xff1a; 详细代码&#xff08;使用自带函数&#xff09;&#xff1a; 题目描述 输入一行&#xff0c;首先是一个不包含空格的字符串s&#xff0c;接着是一个字符c&#x…

Spring Boot 自动配置:从 spring.factories 到 AutoConfiguration.imports

Spring Boot 提供了强大的自动配置功能&#xff0c;通过约定优于配置的方式大大简化了应用开发。随着版本迭代&#xff0c;自动配置的实现方式也逐渐优化&#xff0c;从早期的 spring.factories 文件到最新的 META-INF/spring/org.springframework.boot.autoconfigure.AutoConf…

洪水灾害多智能体分布式模拟示例代码

1. 环境定义&#xff1a;支持灾害动态、地理数据和分布式架构 import numpy as np import random import matplotlib.pyplot as plt# 新疆主要城市及邻接关系 XINJIANG_CITIES {Urumqi: [Changji, Shihezi],Changji: [Urumqi, Shihezi, Turpan],Shihezi: [Urumqi, Changji, K…

华为麦芒5(安卓6)termux记录 使用ddns-go,alist

下载0.119bate1版,不能换源,其他源似乎都用不了,如果root可以直接用面具模块 https://github.com/termux/termux-app/releases/download/v0.119.0-beta.1/termux-app_v0.119.0-beta.1apt-android-5-github-debug_arm64-v8a.apk 安装ssh(非必要) pkg install openssh开启ssh …