使用场景:在tab 选项卡中使用了 echart 图表,然后在页面切换时,echarts 图表的宽度由原来的 100% 变为 100px
问题原因:echarts 渲染时 tab 选项卡 的 display 属性为 none,所以 width 属性为 100% 就没有可继承项,被 echarts 自带的方法切割成 100px
解决办法:使用 this.$nextTick
<ul class="tabbar">
<li><a href="javascript:void(0);" :class="{selected: key == activeTab}" v-for="(item, key) in childrentabs" @click="changeChildTab(key)" :key="key">{{item.name}}</a></li>
</ul>
<div class="tab-contain" v-show="activeTab == 'first'">
<div ref="line" style="width:100%;height:100%;"></div>
</div>
<div class="tab-contain" v-show="activeTab == 'second'">
<div ref="pie" style="width:100%;height:100%;"></div>
</div>
methods: {
changeChildTab(key) {
this.activeTab = key
if (key === 'first') {
this.$nextTick(() => {
this.drawLine()
})
} else {
this.$nextTick(() => {
this.drawPie()
})
}
},
}