原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化
原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab
<el-tabs type="border-card" v-model="echarts_tabItem">
<el-tab-pane label="SH" name="SH">
<echartsMain v-if="'SH' === echarts_tabItem"></echartsMain>
</el-tab-pane>
<el-tab-pane label="SZ" name="SZ">
<echartsMain v-if="'SZ' === echarts_tabItem"></echartsMain>
</el-tab-pane>
</el-tabs>
<template>
<div id="small-container" style="height:400px;width:100%">
<div style="height:400px;width:100%" ref="echarts"></div>
</div>
</template>
var myChart=this.$echarts.init(this.$refs.echarts);
window.addEventListener('resize', () => { //echarts自适应宽度
window.onresize = myChart.resize(); })