echart组件结合tab，宽度变成100px

最新推荐文章于 2025-05-13 11:34:16 发布
最新推荐文章于 2025-05-13 11:34:16 发布
阅读量292 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nuoyuezuo/article/details/123737562
本文介绍了一种在页面加载过程中解决图表默认尺寸显示不正确的方法。通过使用elementUI的lazy=true属性实现图表的延迟加载，确保图表在正确渲染前能够获取到父容器的实际尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原因是在页面进行加载时，父容器最初是被隐藏的，宽高为0。隐藏的图表找不到对应的div大小，所以默认给了一个大小。
解决：
其他方法都试过没什么用
这个可以：
element UI 官方提供的 lazy="true" 延迟加载，也就是待tab页切换时，父容器tab渲染完毕再去渲染子组件

在这里插入图片描述

Echart
qq_45676798的博客
05-20 437
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
前端--echarts--使用tab时 echarts图表无法正常加载（无法正常显示）
VIP_CR的博客
02-14 1909
项目里图表高度设置了固定的360px。 项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后 对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不出来。 第一个tab ：图表1 （当前负荷） 第二个tab ：图表2 （当前电量） 原因：因为页面加载时， 第二个tab ：图表2 （当前...
vue-echarts在tab切换中的图表显示宽度为100px
weixin_34239169的博客
05-24 2038
2019独角兽企业重金招聘Python工程师标准>>> ...
echart 宽度设定100%变成100px问题
YHJ_2298的博客
11-01 1827
echart 切换Tab导致100%变成100px
记录在弹框使用echarts,宽度100%变100px
最新发布
m0_56654689的博客
05-13 235
echarts宽度由100%变100px
echart宽度100px原因（解决el-tabs里的echarts图表宽度不自适应，只有100px问题）
IT_dabai的博客
11-09 3104
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
1.Echarts的坑：切换tab时，echart显示默认的100px
ME_GIRL的博客
06-12 704
1.切换tab时，echart显示默认的100px 切换tab时，elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法 切换tab时先销毁然后再init（注意：要在this.$nextTick中进行操作，确保能获取到dom） this.$nextTick(() => { this.$echarts.init(document.getElementById("element")).dispose()
echarts在tab切换时容器宽度设置为100%，只展示100px
qq_43789643的博客
05-25 253
mychart.setOption(option); 后面加上 mychart.resize();
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 [removed] ...
简单粗暴解决echarts宽度为100px问题
manman的分享
01-04 6273
问题出现场景 elementUI的tabs组件中使用echarts，在切换过程中，echarts宽高失效，只有100px。 问题原因： tabs中的标签是同时渲染的，通过display:none来控制标签的切换，所以除了默认展示的那个标签echarts100%能正常生效，其他的会默认为100px。 简单粗暴的解决方法： v-if 看了一些文章，有element.resize()的，也有window.addLisener(‘resize’)的，也有懒加载的。弄了半天没生效，我就简单粗暴的用v-if了 结果
Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）
前端李小白的博客
08-27 4960
在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’...
tab和echart
wojiaowuyali的博客
12-12 323
tab切换里面在加载不同的echarts报错getAttribute错误 是因为获取的时候dom节点的时候出错了 需要setTimeOut才可以获取到节点 需要在onChange中获取节点 最好才用ref去获取节点 在tab里面封装一个公共组件的话 组件渲染需要在willReceiveProps里面执行 父组件传递props就好   ...
通过el-tab切换Echarts图表显示不全问题
蜗牛快爬
07-25 2474
echarts 在el-tab切换中加载问题
用tab做echarts图表切换的案例
weixin_46679775的博客
09-14 1485
echarts做tab切换是解决各种报错问题
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 1146
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
解决echarts图宽度自适应问题，设置100%宽度显示100px
m0_62626838的博客
12-19 1006
1、原因：这里是因为你的echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。2、解决方法：既然要保证初始化时DOM元素已经渲染，那么我们可以使用v-if，并搭配nextTick（）实现echarts图表异步加载，让其走在DOM渲染之后。
解决echart在tab中切换时显示不正确
u011599033的博客
05-26 2568
在VUE使用Element UI时，在el-tab-pane添加上lazy=’true’属性即可 <el-tab-pane label="远程测试控制" name="远程测试控制" lazy="true"> <remoteTestControl /> </el-tab-pane> 其他解决方法详见以下，作者写得很好，在不同的UI框架中遇到这种情况的解决方法 https://www.cnblogs.com/hao-1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值