echarts在结合element中的el-tabb标签切换时容器宽度设置为100%，只展示100px问题解决

原因

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 视口大小自适应。