echarts 在tab 切换时 width 为100px 时的解决方式

今天在使用 vue+bootstrap+element +echarts项目时
遇到了 echarts 在第二tab页开始会出现 width 为100px的情况
本来我使用的是bt的tab 会出现echarts为100px的情况，
在网上查了大量资料发现大家也有这种情况，不过用的是 element的tab，且解决方法大致为两种
一：懒加载

579910f03ea84d51e1193ba942bd90f.png

这种方法我也尝试过不过没有解决问题 并且这种方法会导致 echarts 的尺寸异常 且无从下手（作者能力有限大家见谅 下面贴出代码和截图）

7e17070745dea12dc6acd0bcedb6461.png

我 测试的代码

 
                
                    


                
                
                    
                    
                
                角色管理
                定时任务补偿
                定时任务补偿
             

这种方法测试多次没能成功 大家见谅也可以去试试参考 这位作者
https://www.jianshu.com/p/cf12a690ae4c
二：v-if判断name
同样这种方式我依然没有测试成功 ！！！！ （贴出代码和截图）

604b9849b0054bebf41699c7ed2fecb.png

我测试的代码

  
                
                    心率
                    
                
                
                    呼吸
                    
                
                
                    体动
                    
                
            

这个依然测试没有成功 大家可以去看看 原作的文章希望对大家有帮助
https://blog.csdn.net/SanJiK/article/details/79764429

还有第三种不过比较鸡肋
获取屏幕尺寸 并减去tab 侧壁栏的width来为echarts 赋值 给到想要的宽度
但是这个在适配且多个图表的情况下会使代码昂沉和用户体验较差 且优化维护起来 较为麻烦
（依然贴下代码和截图）

db5f902edd7c2135a1172421d586c3d.png

这个初始化图表时 获取width且为他赋值 图表的渲染按官方文档走即可；

四 作者认为最好的解决方法
因为所有的问题都是在tab切换时出现的 因为tab切换时display为none
我们给他重置样式就好

.tab-content > .tab-pane,
.pill-content > .pill-pane {

display: block;     /* undo display:none          */

height: 0;          /* height:0 is also invisible */

overflow-y: hidden; /* no-overflow                */

}
.tab-content > .active,
.pill-content > .active {

height: auto;       /* let the content decide it  */

}

这个是bootstrap的样式替换 大家也可以试试elemet的替换
另附上解决方式作业原文地址
https://blog.csdn.net/weixin_41438039/article/details/78832953