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

原因:

第一次点开不显示图表,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有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)
})
相关推荐
张元清10 小时前
useEffect 之外:专门处理异步、深比较和 SSR 的 Effect Hook
前端·javascript·面试
XinZong11 小时前
OpenClaw 中最经典的 6 款skill,真正能进工作流的 skills
javascript·后端
XinZong11 小时前
2026 AI社交深度评测:InStreet 与 ClawReach 核心差异解析
javascript
Bug-制造者12 小时前
【Vue3 实战】全局错误处理体系搭建:实现业务与错误彻底解耦
前端·javascript·vue.js
竹林81812 小时前
从ethers.js迁移到Viem:我在DeFi Dashboard项目中踩过的坑与最终方案
javascript
zithern_juejin12 小时前
ES6——Promise
javascript
桜吹雪13 小时前
所有智能体架构(1):反思 (Reflection)
javascript·人工智能
前端那点事14 小时前
Vue3+TS 封装高复用 ECharts 通用组件,自适应+防抖+主题切换,开箱即用
前端·vue.js
前端那点事14 小时前
Vue3+TS动态路由终极方案|后端权限、刷新不丢、按钮权限、解决所有404BUG
前端·vue.js