使用echarts宽度100%变成100px问题

当图形宽度设置是100%时，切换tab后变成了100px了，（或者弹框内容为echarts图时，宽高设置的100%）如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。
原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。

解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。
比如：
1.直接写死，显然不符合项目需求；；
2.用window.innerWidth (减去界面一部分宽度) + ‘px’，说到底也是写死的宽度，跟直接写xx px没啥区别，在改变浏览器的宽度时更是被压缩变形了；
3.在后面直接加上resize().这个解决法子很片面。resize是在容器大小发生改变时需要手动去调用，并不是你切换tab时出现100px自动调用的；

最后我使用一个最有效的办法：v-if
把要切换的内容分离出一个组件，让v-if指令去渲染，重新生成组件。

用v-if基本可以解决问题了，但是用v-if，对DOM比较不友好，每一次切换都重新销毁重新重成，会产生重排问题，重排问题会影响页面性能，一个页面使用echarts图形多时，严重的会导致页面卡顿，所以得想办法优化重排，减少重排重绘，在这建议通过批量修改DOM来减少重排问题，这样下来就可以完美解决问题了！
参考文章：https://blog.csdn.net/m0_48507640/article/details/107737938