Vue中Echarts图表宽度如何设置才能完全占满容器？

本文共计564个文字，预计阅读时间需要3分钟。

目录 + Vue+Echarts图表宽度未占满 + 解决方法 + Vue+Echarts图表宽度自适应，亲测有效 + 实现宽度自适应语句 + Vue+Echarts图表宽度未占满，显示效果： + 经测试，当将宽度写成固定px时，就能正确显示

目录

• vue Echarts图表宽度没占满
• 解决方法
• vue Echarts图表宽度自适应，亲测有效
• 实现宽度自适应语句

vue Echarts图表宽度没占满

显示效果：

经过测试，当把宽度写成固定px的时候，就能正确渲染。

解决方法

1、宽高写成固定px，针对宽度不需要自适应的大屏。

2、当宽度需要自适应，父元素需要设置宽高，可以使用$nextTick 当元素宽度发生改变，只需要等待DOM渲染完成在渲染图表，这样就不会出现问题了。

相似案例：

当点击按钮使用v-if进行图表切换，同样会使出现宽高不占满情况。