在使用element中的抽屉<el-drawer>页签<el-tabs/>组合时,echarts图表宽度显示异常问题
类似这种情况,宽度异常
原因:在展示出抽屉时,图表的组件一件初始化了,导致他的宽度提前设定好了(我默认的style="width: 100%; height: 300px;"),我得解决方法有2个:
1、第一种,就是一开始就给它设置固定的宽高
style="width: 500px; height: 300px;"
2、第二种,就是延迟图表组件的初始化,比如:
a、如果默认的页签的activeName不是图表组件的那个名称,可以做一下判断,比如我圈红圈的
b、监听activeName,在图表组件的<el-tab-pane>激活的状态再调用初始化图表
3、使用 echarts 自带的 resize 方法,在激活的时候调用一下
this.chart.resize();