当前位置: 首页 > article >正文

解决 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.kler.cn/a/454765.html

相关文章:

  • 从VLM到VLA概论
  • 【Unity3D】ECS入门学习(七)缓存区组件 IBufferElementData
  • lin.security提权靶场渗透
  • 【前沿 热点 顶会】AAAI 2025中与目标检测有关的论文
  • Thinkphp 使用workerman消息实现消息推送完整示例
  • 【Linux】:线程安全 + 死锁问题
  • leetcode hot100 腐烂的橘子
  • zabbix5.0版本(安装部署+添加服务器+拆分数据库)
  • 产品初探Devops!以及AI如何赋能Devops?
  • 3-Linux 用户管理入门
  • 路由器刷机TP-Link tp-link-WDR566 路由器升级宽带速度
  • VMware安装CentOS 7
  • Spring 容器与配置类
  • 面试题整理19----Metric的几种类型?分别是什么?
  • 一文快速预览经典深度学习模型(二)——迁移学习、半监督学习、图神经网络(GNN)、联邦学习
  • 输入输出流 - cin, cout 的使用
  • 6、MHA
  • 【WRF模拟】如何得到更佳的WRF模拟效果?
  • Lockpass(密码管理器) v0.0.14
  • OpenTK 中几何着色器的使用
  • 全国硕士研究生入学考试(考研)热门问题解答
  • 智慧城市超声波气象站
  • 011-spring-整合三方框架的命名空间原理(重要)
  • PyQt + OpenCV综合训练
  • 科技云报到:人工智能时代“三大件”:生成式AI、数据、云服务
  • 常微分方程算法之四阶龙格-库塔法(Runge-Kutta)推导