如何避免echarts图表因v-show控制导致显示不全的问题？

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

最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用v-if时会出现没有获取到DOM结构而报错。所以改为使用v-show，但v-show本身是结构已存在，当数据发生变化时，会出现显示隐藏的异常。

最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图：

还折腾了半天，其实就是当数据请求出来后，调用绘制ehcarts时图表的时候，用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表，使之强制渲染就可以正常显示了

正常显示图表：

补充知识：vue中v-if和v-show对echarts图的影响

背景

前几日在做UBA项目的时候有一个页面需要用echarts图展示用户对各个节目的点播量，页面结构为左侧柱状图展示节目点播量，右侧饼图和折线图展示某个节目的用户点播分布和用户点播变化趋势（如下图），因为我们造的数据是11月26日的，而进入页面默认查询最近1天的，所以刚进来肯定是查不到数据，需要自行选择时间去查询数据。而在查数据的时候出现了echarts折线图无法正确获取宽高的情况。