echarts 在tab 切换时 width 为100px 时的

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

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

 <el-tabs :tab-position="tabPosition">
                <el-tab-pane label="备课排课" name="beike">
                    <div id="j_0" :style="{width: '100%', height: '500px'}"></div>

                </el-tab-pane>
                <el-tab-pane :lazy=true label="课堂数据" name="prepare">
                    <data_prepare_lessons ></data_prepare_lessons>
                    <!--<div id="j_1" :style="{width: '100%', height: '500px'}"></div>-->
                </el-tab-pane>
                <el-tab-pane :lazy=true label="作业数据">角色管理</el-tab-pane>
                <el-tab-pane label="错题数据">定时任务补偿</el-tab-pane>
                <el-tab-pane label="知识掌握情况">定时任务补偿</el-tab-pane>
            </el-tabs> 

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

604b9849b0054bebf41699c7ed2fecb.png
我测试的代码

  <el-tabs type="card" v-model="tabItem">
                <el-tab-pane name="heart">
                    <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
                    <data_prepare_lessons ref="heart" v-if="'heart' === tabItem"></data_prepare_lessons>
                </el-tab-pane>
                <el-tab-pane name="breath">
                    <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
                    <baseline ref="breath" id="j_0" v-if="'breath' === tabItem"></baseline>
                </el-tab-pane>
                <el-tab-pane label="体动" name="move">
                    <span slot="label"><icon name="move" scale="2"></icon>体动</span>
                    <baseline ref="move" id="j_1" v-if="'move' === tabItem"></baseline>
                </el-tab-pane>
            </el-tabs>

这个依然测试没有成功 大家可以去看看 原作的文章希望对大家有帮助
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