解决echarts图表使用v-show控制图表显示不全的问题

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

正常显示图表：

解决

后来在走读代码的过程中我发现对于右侧饼图和折线图的组件我是用v-show判断的，当第一次没查到数据的时候，右边的echarts图也已经初始化了，并且由于v-show的display:none而没有拿到正确的宽高，这才出现的上图的这种现象。而饼图没有出现这种现象大概是因为饼图中没有设置grid:{containLabel:true}。后来我将v-show改成了v-if，只有当柱状图获取到了数据才加载右边的元素，就再也不会有这种问题了。

以上这篇解决echarts图表使用v-show控制图表显示不全的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。