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

ops/2024/12/28 17:14:58/

原因:

第一次点开不显示图表,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有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/ops/145700.html

相关文章

NSSCTF-web刷题

[UUCTF 2022 新生赛]ez_upload Apache解析漏洞&#xff0c;apache cve2017 重点是把文件名改为1.jpg.php就可以将图片解析为php&#xff0c;很抽象&#xff0c;这个洞 蚁剑直接连 [SWPUCTF 2022 新生赛]ez_1zpop <?php error_reporting(0); class dxg { function fmm() {…

频繁拿下定点,华玉高性能中间件迈入商业化新阶段

伴随着智能驾驶渗透率的快速增长&#xff0c;中国基础软件市场开始进入黄金窗口期。 近日&#xff0c;华玉通软&#xff08;下称“华玉”&#xff09;正式获得某国内头部轨道交通产业集团的智能化中间件平台定点项目。这将是华玉在基础软件领域深耕和商业化发展过程中的又一重…

如何保护你的 iOS 应用免受逆向工程攻击

逆向工程是分析和解构软件以理解其工作原理的过程。针对 iOS 应用&#xff0c;逆向工程通常涉及分析已编译的二进制文件&#xff08;机器可读的代码&#xff09;&#xff0c;并将其转化为更容易被人类理解的形式。这使得攻击者能够检查应用的逻辑、理解数据处理的方式&#xff…

uniappX 移动端单行/多行文字隐藏显示省略号

在手机端不能多行省略使用 -webkit-line-clamp 属性所以移动端多行省略不会生效改为 lines 属性即可 /**单行文本溢出显示省略号*/ .text-ov1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: auto; } /**APP多行文本溢出显示省略号*/ // #ifdef APP-…

电脑ip地址会变化吗?电脑ip地址如何固定

在数字化时代&#xff0c;IP地址作为网络设备的唯一标识符&#xff0c;对于网络通信至关重要。然而&#xff0c;许多用户可能会发现&#xff0c;自己的电脑IP地址并非一成不变&#xff0c;而是会随着时间的推移或网络环境的变化而发生变化。这种变化有时会给用户带来困扰&#…

《Ceph:一个可扩展、高性能的分布式文件系统》

大家觉得有意义和帮助记得及时关注和点赞!!! 和大多数分布式存储系统只支持单一的存储类型不同&#xff0c;Ceph 同时支持三种&#xff1a; 文件系统&#xff08;file system&#xff09;&#xff1a;有类似本地文件系统的层级结构&#xff08;目录树&#xff09;&#xff0c…

CSS系列(40)-- Container Queries详解

前端技术探索系列&#xff1a;CSS Container Queries详解 &#x1f4e6; 致读者&#xff1a;探索组件响应式的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS Container Queries&#xff0c;这个强大的组件级响应式特性。 基础概念 &#x1f680; 容…

Linux下编译安装Kokkos

本文记录在Linux下编译安装Kokkos的流程。 零、环境 操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1oneAPI2024.2.1 一、安装依赖 二、编译安装 参考文献 Mills R T. PETSc/TAO Developments for Early Exascale Systems[J]. 2024.Josef R. A Stud…