echarts 宽度写成百分比后只显示100px的问题

违规昵称001

于 2021-06-11 09:35:56 发布

阅读量1.6k

点赞数

分类专栏： vue echarts

本文链接：https://blog.youkuaiyun.com/m0_37528005/article/details/117805461

版权

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文解决了Vue项目中ECharts图表在Element-UI Tabs组件下显示宽度仅为100px的问题。通过在外层创建一个占位div并绑定ECharts的宽度，确保了图表能够正确展示100%宽度。

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

vue项目里用到了echarts，但是发现渲染出来的宽度只有100px，设置的100%宽度不生效
后来找了很久的原因，发现是因为配合使用了 element-ui的tabs切换导致的，tab下的内容默认是display：none，所以echarts的父级宽度为0，就默认是100px了
尝试了好几种解决办法，最终我的解决方案是写了一个空的100%宽度的div在tabs外面，这样能保证在渲染的时候这个div的宽度有了，然后再通过dom操作的方式将echarts的宽度绑定到这个div上，这样就能起到100%宽度的效果了
在这里插入图片描述
实现如下：

在这里插入图片描述

document.getElementById('trendChart').style.width = document.getElementById('innerWidthAuto').offsetWidth + 'px' //折线图