vuejs v-show对echarts的显示的影响？

Question

具体的需求如下：（挂载的时候option里面的数据时空的，初始化的时候填充进去）

这个是表格位置的限定：

此处是数据的填充：

初始化数据的时候echarts能够正常显示，

点击“关闭更多”后表格收起，再次点击“查看更多”,表格就不渲染了变成了空白，数据还在，就是无法渲染，有人知道这是什么问题吗？

页面布局如上图所示：<section id="myChart"></section>

Answer 1

看看这个

百度一下很难吗

Answer 2

问题原因：
1、v-show控制的是元素的隐藏与显示属性即：display:none|block;用于并不需要重新渲染的静态元素和数据
2、v-if 需要的时候才进行渲染，页面中未渲染前是不存在该元素的，同样获取不到对应元素的各种属性
3、<section id="myChart"></section>外还套有一层div，该div使用的是v-if来控制，所以再次展开时echarts空白显示

总结：造成echarts隐藏与显示切换div空白的情况:
1、如："凹凸不平"的链接，即高度未正确获取导致；
2、未echarts绑定v-if未重新渲染导致；
3、也就是我的情况了，v-if和v-show嵌套不慎导致；

Answer 3

使用 v-show 会出现显示的图表不全，使用 v-if 会重新渲染 dom,但是渲染是异步的，会导致渲染图表时找不到 dom 元素，使用 nextTick 能完美解决
<div class="warpper-chart" style="{height: '300px'}">
<div id="chart" v-if="isShowChart" style="{width: '100%', height: '100%'}></div>
</div>

this.$nextTick(() => {
this.isShowChart = true;
this.renderChart() // 渲染操作
})