原因：echarts绘制图表计算宽度的时候，由于第二个tab的属性display: none;所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度为100px。
解决：
<template>
<el-tabs type="border-card" ref="chartWrap" :tab-position="tabPosition" @tab-click="handleClick" class="m-el-tabs">
<el-tab-pane label="图表1">
<el-row v-loading="chartLoading" style="width: 100%;" >
<v-chart :options="size" ref="size" class="indexChart"/>
</el-row>
</el-tab-pane>
<el-tab-pane label="图表2">
<el-row v-loading="chartLoading" style="width: 100%;" >
<v-chart :options="btop" ref="btop" class="indexChart" />
</el-row>
</el-tab-pane>
<el-tab-pane label="图表3">
<el-row v-loading="chartLoading" style="width: 100%;" >
<v-chart :options="growth" ref="growth" class="indexChart"/>
</el-row>
</el-tab-pane>
</el-tab-pane>
</el-tabs>
</template>
<script>
import echarts from "echarts"; //引入echarts
import elementResizeDetectorMaker from "element-resize-detector"; // 引入elements封装的自适应工具
export default {
data(){
tabPosition: 'left',
size: null,
btop: null,
growth: null,
},
methods:{
formatOption(){
this.size = {}, // echarts在这绘制
this.btop = {},
this.growth = {}
},
// ECharts图自适应屏幕变化
handleClick(){
const erd = elementResizeDetectorMaker();
erd.listenTo((this.$refs.chartWrap).$el,()=>{
this.$refs.size.resize(); // 初始化首张图
this.$nextTick(()=>{ this.$refs.size.resize() }); // 图1
this.$nextTick(()=>{ this.$refs.btop.resize() }); // 图2
this.$nextTick(()=>{ this.$refs.growth.resize() });// 图3
})
},
mounted(){ // 初始化一下
this.handleClick()
}
}
</script>
<style>
.indexChart{
width: 100%;
}
</style>参考：www.cnblogs.com/hanhanours/… www.cnblogs.com/zhaohongche… blog.csdn.net/zhangshab/a…