elementUI-dialog中使用echarts报错

最新推荐文章于 2024-06-18 15:12:22 发布
最新推荐文章于 2024-06-18 15:12:22 发布
阅读量1.7k 收藏
点赞数
分类专栏： echarts element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42312077/article/details/106805821
版权
在elementUI的dialog中使用echarts时，由于DOM未及时渲染导致报错。通过Vue的nextTick方法确保在DOM更新后初始化echarts图表，参考相关博客文章已找到解决方案。
摘要由CSDN通过智能技术生成

打开el_dialog时，dom元素还没有渲染完成，可使用Vue.nextTick解决问题

openDialog() {
   
  this.dialogVisible = true;
  this.$nextTick(() => {
   
    this.drawCategorySales
最低0.47元/天 解锁文章
小李吖
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6977
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined
丑小鸭变黑天鹅的博客
09-01 2242
TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法 问题描述 最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用 npm install echarts@4.8.0 --save 然后再main.js文件中引入并挂载到全局中 // 引入echarts im
#Vue2篇：el-dialog里面套echarts报错问题
...
10-11 579
Error in nextTick: "Error: Initialize failed: invalid dom." found in
el-dialog组件中使用Echarts工具
weixin_48495158的博客
04-11 676
【代码】el-dialog组件中使用Echarts工具。
ECharts 在Element tabs 里面图形缩小
我是我家小女孩
04-09 571
ECharts 在Element tabs里面图形缩小了，设置了宽度100% 还是不可以。 加上:lazy=true就可以了
如何在vue的dialog弹窗中显示echarts图表，并且点击第一次就能显示，解决不会出现点击一次，不出现图表，第二次才出现图表的问题
qq_19280295的博客
01-26 6104
如何在vue的dialog弹窗中显示echarts图表，并且点击第一次就能显示，解决不会出现点击一次，不出现图表，第二次才出现图表的问题。 经过多次搜索并且在别人的启示下做出改动。 别人的帮助 实现的效果如下： 完整代码 <template> <div class="app-container"> <el-button type="text" @click="newDialogFormVisible = true">点击打开 Dialog</el-bu
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决（亲测有效）。
happy81997的博客
11-29 1047
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。 解决思路： 1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。 2、给echarts的DOM强制赋值第1步的宽度和高度即可 document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 467
关于在Element UI的el-dialog组件中使用echarts的问题 问题描述： "Cannot read property 'getAttribute' of null" "ECharts Can't get dom width or height!" "Initialize failed: invalid dom" 原因： 当我们打开el-dialog时，dom元素是还没有渲染完成的 解决： // 使用setTimeout定时间器 open(){ this.dialogVisibl
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts
丑小鸭变黑天鹅的博客
09-08 1513
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts一、问题描述二、 解决办法 一、问题描述 目前在做一个vue项目，遇到这样一个问题。我使用了dialog去设置一个弹框，弹框里添加tab标签页，然后点击不同的tab，显示对应的内容。其中包括echarts的显示。数据或者其他都正常显示，唯独echarts只显示初始化时的。点击其他tab，echarts不显示，于是就上网查了很多资料。先看一看，之前错误的代码，和效果 中间代码
el-dialog中无法显示echarts
最新发布
bamboo_007的博客
06-18 344
el-dialog中无法显示echarts
vue echarts初始化失败
qq_64436918的博客
05-16 1274
方法一 有可能组件是在赋值前挂载的所以导致渲染不出来，如果是想请求接口后赋值给图表然后把图渲染出来，可以在请求接口的then里调用方法。 赋值后调用echarts。 方法二 可以在mounted里调用echarts。 方法三 可以使用watch方法监听值的变化来调用echarts 总结:在请求接口的then里调用echarts比较简单，感觉也没什么问题。 ...
Vue解决echart在element的tab切换时显示不正确
热门推荐
SanJiK的博客
03-30 1万+
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。如下是个人的解决方法： 原理：利用v-if属性,当...
el-dialog中中使用echarts
ANNENBERG的博客
09-29 2997
1、在dialog中使用open方法 <el-dialog :title="diaTitle" :visible.sync="dialogVisible" @open="open()" > </el-dialog> 2、在定时函数setTimeout中执行方法 open() { const t = this; setTimeout(() => { // 执行echarts画图方
Elementui- dialog中使用Echarts
cuiyiran_的博客
08-16 1432
dialog中使用Echarts
vue+echarts ② echarts两个图表在同一行、echarts图表放在el-dialog里面展示
zujiasheng的博客
08-24 3802
echarts两个图表在同一行、echarts放在el-dialog里面展示① 效果图② div样式设置：用一个div包住图表，样式设置为 float: left;
Vue 3 中按需引入 ECharts,el-dialog使用ECharts不显示的问题。
strxiaojie的博客
02-26 990
【代码】Vue 3 中按需引入 ECharts。
el-dialog里加入echarts曲线图，显示不出来
weixin_56253950的博客
02-16 610
el-dialog里加入echarts曲线，曲线不显示和闪现一下就消失，也不报错，不知道是什么原因。
【Echarts】vue项目el-dialog中使用echarts，第一次点击不显示的解决方案
前端代码小白的日常博客
04-12 1498
在项目需求中需要点击el-table中的某条数据，显示出该条数据的变化趋势，使用的是echarts4，发现每次点击el-dialog的时候，点击第一次的时候不会显示echarts的内容，但是查看元素的时候发现元素中有存放echarts的盒子，第二次点开虽然显示图表，但是图表挤在一起，页面检查发现宽高只有100px,但是明明已经设置样式宽高100%。
elementui中 el-dialog使用
03-03
<span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </el-dialog> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值