问题:echarts图形宽度设置的是100%,初始的tab里面图表正常,但切换t到另一个tab之后变成了宽高变为了100px。
原因: 审查元素和查找很多资料后发现,tab页使用echarts都会存在echarts设置百分比自适应问题设置100%后只有100px,切换tab前,元素本身就是存在的,只是样式被设置成display: none,那么宽高为0px,但是echarts对图形最小的默认为100px,所以出现问题。
解决:
1. 使用echarts实例自带的resize()方法
2. 使用v-if来从新加载组件(缺:每次切换都会销毁和创建组件,对DOM不友好,图表过多可能会卡顿 优:每次切换图表会有自带的动画)
(可能还有其他方法。。。。。)