原因
echarts结合el-tab时,初次渲染组件moutnted的时候,未显示tab内的组件display为none,echarts无法获取父组件的高度100%,而转换成100px显示
方法1
给图表设置固定宽度
方法2
通过 mounted的时候获取window.innerWidth,根据innerwidth设置echarts的宽幅,
如:const myEcharts = echarts.init(document.getElementById(‘UnSafeActStatistics’));
window.addEventListener(‘resize’, () => {
myEcharts.style.width = window.innerWidth - 200 + “px”;
myChart.resize();
});
以上两种方法都是写死,如果window.innerWidth发生改变,echarts无法自适应,因为width已经被固定了。
方法3
父组件部分
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="background-color: transparent;height:200px;">
<el-tab-pane name="1">
<span slot="label"><i class="el-icon-date"></i> 设备检测</span>
<component-child1 :activeName="activeName"></component-child1>
</el-tab-pane>
<el-tab-pane name="2">
<span slot="label"><i class="el-icon-date"></i> 行为检测</span>
<component-child2 :activeName="activeName"></component-child2>
</el-tab-pane>
</el-tabs>
子组件部分
<template>
<div id="component-child1" style="width:100%;height: 200px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'UnSafeActStatistics1',
props:["activeName"],
data() {
return {
chartLine:{},
};
},
watch: {
activeName: function() {
this.chartLine.resize();
}
},
mounted() {
const myEcharts = echarts.init(document.getElementById('component-child1'));
this.chartLine=myEcharts;
//其余
window.addEventListener("resize",function(){
myEcharts.resize();
})
},
}
</script>
该方法说明:
将tabs的activeName传递给各个组件,在组件内部watch监听 props中的activeName,当activeName改变时,执行echarts的resize。结合监听window的resize时间,就可实现tab切换echarts充满父组件,也能够根据window 视口大小自适应。