$nextTick解决echarts宽度固定为100%的问题

已于 2023-09-28 15:22:18 修改
阅读量476 收藏
点赞数
分类专栏： java编程的Bug解决 文章标签： echarts vue.js javascript
于 2023-09-28 15:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fu18838928050/article/details/133383966
版权
在Vue+Element项目中遇到Echarts图表宽度固定为100px的问题，原因是Echarts在tab隐藏状态下渲染。通过Vue的$nextTick方法，确保在DOM更新后再初始化Echarts，成功解决宽度继承问题。具体解决方案包括在图表挂载时调用Echarts，并在点击事件中利用$nextTick更新图表尺寸。
摘要由CSDN通过智能技术生成

问题描述：vue+element项目中使用到了tab切换选项卡，其中有一个tab下的内容是echarts，出现了echarts宽度缩减为100px无法继承100%属性。

问题：

echarts渲染时tab选项卡display为none，所以width：100%没有可继承项，被echarts自带方法切割成100px。

我他喵的解决这个问题还是我在刚开始学前端的时候，我他喵的是个纯后端 ，解决这问题快帮我打通了前端的前督后脉，真的是，我真是个倔驴，明明只会点js，练element和vue是啥都不知道，echarts都不知道，硬上，这会解决了一天，啥都懂点了。

话说，大家都有不同的解决方式，但是我试来试去，不管用啊

了解本专栏 订阅专栏 解锁全文 超级会员免费看
小雨滴Java
关注
专栏目录
订阅专栏
Echarts 图表宽度自适应问题解决方案（第一次初始化和监听屏幕变化时）
朝花夕拾的博客
05-06 839
【代码】Echarts 图表宽度自适应问题解决方案（第一次初始化和监听屏幕变化时）
vue3中使用echart，彻底解决宽度100%变成100px
tuku0801的专栏
03-26 2249
vue3+echart的使用，遇到的尺寸显示问题，100%显示为100px的解决办法
el-tab 内嵌echarts图表设置宽度100%结果为100px的解决办法
weixin_41693437的博客
09-22 590
解决方法：外部div盒子必须要在init初始化前就已经存在于dom树中（也就是已经挂载）。在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。主要原因：图表设置了display:none属性上（属性含义：不为被隐藏的对象保留其物理空间，关闭元素的显示，并且所有后代元素不显示。
关于echarts图表宽度不能占满整个100%宽度以及不能自由伸缩的的解决办法（vue2，vue3应该换汤不药）
m0_67736196的博客
07-20 1047
/ 1 、基于准备好的容器初始化echarts实例对象// 2 、指定图表的配置项和数据grid: {// 调整距离left: '5%', // 左right: '5%', // 右bottom: '3%', // 下top: '4%', // 上},// 标题设置title: {text: 'xxx', // 标题内容},// X轴xAxis: {type: 'category', // 类型name: '公司名称', // X轴名称data: x},
echart 宽度设定100%变成100px问题
YHJ_2298的博客
11-01 1716
echart 切换Tab导致100%变成100px
echarts 与 this.$nextTick
见贤思齐焉，见不贤内自省
12-11 2223
使用变量改变dom后，需要使用this.$nextTick来获取更新后的dom元素。 简单使用方法 ： 使用变量改变dom后，在nextTick回到函数中再调用方法 小案例： <template > <div class="container"> <button @click="changeShow(1)">显示p1</button> <button @click="changeShow(2)">显示p2</button&
vue中echarts设置宽度100%，刷新页面显示100px
weixin_43840305的博客
03-07 535
在项目中使用vue的echarts来制作图表，给echarts图表的div设置宽度为100%，在浏览器中刷新页面后，图表缩到一起，宽度显示只有100px，在网上找了各种解决办法，反正对我是没有作用，设置固定宽度，那样没有意义。
nextTick()，关于Echarts无法通过表格下拉展示出来的问题
qq_52347540的博客
04-11 918
文章目录this.$nextTick()：将回调延迟到下次DOM更新循环之后执行理由！！解决方案： this.$nextTick()：将回调延迟到下次DOM更新循环之后执行 在我们使用Echarts的时候，首先要准备一个容器，有了容器我们才能将它渲染出来 倘若我们要设计一个表格，然后有一个下拉框，点击下拉框的时候展示出我们的echarts【同理，不仅仅是下拉框，后面vue才添加的元素都算】 这种效果如果直接在vue函数中实现的话，代码如下： html代码 js代码 然而这样会有一个错误，echar
vue2+echarts渲染实时数据图像 通过el-tab切换
qq_43016941的博客
06-17 1590
vue2+echarts渲染实时数据图像 通过el-tab切换。解决el-tab切换图表变窄，echarts自适应宽高，页面渲染时机问题。
Echarts常见问题整理
qq_45670042的博客
06-09 3662
文章目录前言一、常见问题记录1.如何创建一个自适应的Echarts图表（动态给Echarts图表当前高度初始化+窗口缩放Echarts图表自适应）动态高度初始化思路一：通过css样式aspect-ratio（宽高比）解决思路二：通过在父组件dom操作获取当前高度clientHeight（只读），作为参数调用子组件方法，在子组件获取到当前高度后初始化。窗口缩放时图表内容自适应2.调整Echarts图表大小、位置、显示网格线3.柱状图根据x坐标数量动态判断柱状图柱条的宽度、防止x坐标过多导致重叠宽度问题防止x坐
eCharts表进行宽高的自适应
weixin_44986077的博客
12-20 2794
最近做eCharts图表，但是有个需求就是想要适配不同的屏幕，但是发现eCharts不能自己进行适配，然后就上网进行翻阅，现在进行总结一下 首先我把eCharts单独提到一个组件中 在需要的组件中进行引入 下面看一下Echarts中index.vue中的代码 <template> <div id="myChart" :style="{width: '600...
nextTick的用法（scrollTop/echarts）
luffy的博客
08-18 493
文章目录前言一. scrollTop一直为0二. nextTick总结 前言 提示：文章可能有错误的地方，希望各位大佬能够指出，谢谢 一. scrollTop一直为0 Why scrollTop==0? 那是因为你给一个没有滚动条的元素设置滚动条的位置。 documentElement.scrollTop或者document.body.scrollTop 一直为0的情况 产生根本原因是因为没有给scrollTop的元素设定值，直接原因还是因为浏览器兼容问题。 document.documentEleme
vue知识点————$nextTick
Mr_wuying的博客
09-13 302
在项目中我们要跟后端请求数据，拿到数据处理后渲染DOM，然后可能根据业务需求，要求对DOM节点进行一些操作或者，或者DOM节点，这时会出现DOM没更新完后，你获取DOM是拿不到的。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。但是会报错说DOM节点不存在。因为我的DOM节点是根据后端返回数据多少个循环的。比如我在项目中用到了echarts。要拿到DOM的节点渲染。所以这里就会用到**$nextTick**
vue 中 this.$nextTick() 的使用
string佳佳的博客
05-06 231
参考博客 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 this.$nextTick(function(){ ... }) ...
this.$nextTick()关于在vue中使用Echarts初始化获取Dom失败的原因分析
m0_50899555的博客
03-03 4181
vue中在mounted周期内使用Echarts初始化获取Dom失败。vue是异步更新的，故当函数执行和数据传递存在时间差时，可以使用nextTick函数来延迟调用。
vue this.$nextTick的作用（echarts不能实际获取dom的宽度bug）
朱宏的博客
10-12 1478
事情是这样的，规定的dom元素width：100%；echart里面设置了偏移，所以dom设置的时候echart获取宽度不一样。 这样能再文档确定下来之再渲染ecahrt。this.$nextTick是指文档元素变更结束之后开始调用。 ...
echarts图表报错，并且后面图表都无法正常显示的问题。
weixin_62353876的博客
09-20 685
我的程序是报错： error in nexttick: "typeerror: cannot read properties of null (reading 'getattribute')"，报错的意思是：nexttick中的错误：“typeerror:无法读取null的属性（读取“getattribute”）”。我的原因是：在data中定义的是一个空数组，然后再通过接口请求回数据。但是接口请求是异步操作，echarts会先拿data中的空数组，就会出现报错原因的第一项和第三项的问题。
eCharts 宽度设置为100%无效的问题应该如何解决
weixin_69188183的博客
05-05 2868
eCharts 宽度设置为100% 刷新后 图表变成上面这样， 像这种情况，应该是页面刷新后，获取不到echarts的dom元素(从页面消失, 脱离文档流), 所以echarts就默认给自己设置了100px的宽。 用如下两行代码可以解决这个问题 ...
$nextTick无效
最新发布
08-15
Vue.js中的`$nextTick`函数通常用于延迟DOM更新到当前事件循环之后执行，这对于处理依赖于DOM状态的计算非常有用。然而，有时可能会遇到`$nextTick`失效的情况，可能是因为以下几个原因： 1. **立即执行**：如果你直接在`data`初始化或`watch`中调用了`this.$nextTick`，并且该操作不需要DOM更新作为前提条件，那么`$nextTick`实际上可能不会等到下次DOM更新，因为它并没有什么事情可以等待。 ```javascript // 错误用法 data() { return { count: 0, ready: false, }; } mounted() { this.$nextTick(() => { /* 这里可能不会等到DOM更新 */ }) } ``` 2. **在模板中立即使用**：在模板中，当直接使用`v-if`、`v-show`或`v-for`切换时，Vue会尝试尽快地切换，此时`$nextTick`可能并不会生效，直到下一次真正的DOM更新。 3. **回调地狱**：如果`$nextTick`在一个递归或深度嵌套的回调链中，可能导致无限循环或错过预期的DOM更新时机。 4. **Vue实例未挂载**：如果`$nextTick`在实例挂载前调用，它将在挂载时执行，而不是在DOM更新后执行。 为了修复`$nextTick`失效的问题，你应该确认是否需要在DOM更新完成后再执行相应的任务，并确保不是上述错误用法。如果是异步操作导致的延迟，考虑使用`async/await`配合`await this.$nextTick()`来确保正确顺序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小雨滴Java

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值