解决 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)
})
相关推荐
lemon_yyds1 天前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js
柳杉1 天前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau1 天前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生1 天前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
进击的尘埃1 天前
AI 代码审查工具链搭建:用 AST 解析 + LLM 实现自动化 Code Review 的前端工程方案
javascript
juejin_cn1 天前
[转][译] 从零开始构建 OpenClaw — 第五部分(对话压缩)
javascript
这个实现不了1 天前
echarts实例:可堆叠的立体柱形图+特殊symbol的折线图
echarts
这个实现不了1 天前
echarts实例:进度条加描述
echarts
这个实现不了1 天前
echarts实例:最高最低标识-并列立体柱形图
echarts
这个实现不了1 天前
echarts实例:双轴水平条形图(菱形和三角形的symbol)
echarts