原因:在页面进行加载时,隐藏的图表找不到对应的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(); })
Echart使用步骤
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
//配置项
var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}],
yAxis: [{
type: 'value'
}],
series: [{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);