使用echarts宽度100%变成100px问题（一招搞定）

每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。

今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。

原因：切换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来减少重排问题，这样下来就可以完美解决问题了！

参考文章：VUE Element Tab Echarts 宽度 百分百 变成 100px（1行代码解决）