本文探讨了在使用Vue的v-show控制Echarts图表显示时遇到的问题，即图表无法正确获取容器宽度导致显示不全。通过使用Vue.nextTick()方法，主动触发图表的重新渲染，解决了这一难题。
最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图：
还折腾了半天，其实就是当数据请求出来后，调用绘制ehcarts时图表的时候，用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表，使之强制渲染就可以正常显示了
正常显示图表：
扫一扫
1744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
