解决 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)
})
相关推荐
浪遏几秒前
D2C 系统架构复盘:从设计稿到代码,我们踩过的坑和最终方案
前端·javascript·后端
farerboy几秒前
WEB 项目如何禁用 F12 等功能
前端·vue.js·架构
Blanche15007 分钟前
Webpack 构建流程解析
javascript·面试
parade岁月11 分钟前
vtable-guild 被收录进 vuejs/awesome-vue 了 🎉
前端·vue.js
Flynt16 分钟前
官方说一个破折号拖慢整段高亮,我在 Node 里验证了一遍:机制是真的,2.8 倍没跑出来
javascript·性能优化·v8
默_笙24 分钟前
🚗 把小说装进数据库了:我的第一个 RAG,和它的五个硬伤
前端·javascript
像我这样帅的人丶你还25 分钟前
📱iPhone Duo 开屏动画咋实现的?
javascript·webgl·three.js
Leslie16525 分钟前
把 SQL 性能诊断接入模型 API:从谓词分析到可验证优化
javascript
沙蒿同学25 分钟前
一个人做完一套企业级系统,赚到了第一个 1000 块
vue.js·后端·go
gnip26 分钟前
UniApp 内嵌 H5 通信全攻略
前端·javascript