解决 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)
})
相关推荐
EveryPossible9 小时前
google搜索框
vue.js
3秒一个大10 小时前
HTML5 与 JavaScript 中的二进制数据处理:ArrayBuffer 与 TextEncoder/Decoder 实践
javascript
purpleseashell_Lili10 小时前
如何学习 AG-UI 和 CopilotKit
javascript·typescript·react
LSL666_11 小时前
4 jQuery、JavaScript 作用域、闭包与 DOM 事件绑定
前端·javascript·html
小飞侠在吗12 小时前
vue computed 和 watch
前端·javascript·vue.js
诸葛老刘12 小时前
next.js 框架中的约定的特殊参数名称
开发语言·javascript·ecmascript
毕设十刻12 小时前
基于Vue的考勤管理系统8n7j8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
coding随想12 小时前
掌控选区的终极武器:getSelection API的深度解析与实战应用
java·前端·javascript
沐风。5613 小时前
Object方法
开发语言·前端·javascript
JS_GGbond14 小时前
JavaScript入门学习路线图
开发语言·javascript·学习