简单粗暴解决echarts宽度为100px问题

manny-liu

于 2021-01-04 14:32:58 发布

阅读量6.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 echarts elementui

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/manmanwei/article/details/112176058

在ElementUI的tabs组件内使用Echarts时，由于tabs的切换是通过display:none实现，导致除默认显示图表外，其他图表宽度变为100px。一种简单的解决方法是利用Vue的v-if指令，避免echarts在未显示时初始化。其他解决方案包括element.resize()、监听窗口resize事件或采用懒加载，但可能实施起来不那么直接有效。

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

问题出现场景

elementUI的tabs组件中使用echarts，在切换过程中，echarts宽高失效，只有100px。
问题原因： tabs中的标签是同时渲染的，通过display:none来控制标签的切换，所以除了默认展示的那个标签echarts100%能正常生效，其他的会默认为100px。

简单粗暴的解决方法： v-if

看了一些文章，有element.resize()的，也有window.addLisener(‘resize’)的，也有懒加载的。弄了半天没生效，我就简单粗暴的用v-if了
在这里插入图片描述
结果

最低0.47元/天解锁文章

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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