关于h5使用bootstrap框架tab栏切换导致echarts图表压缩或者不显示问题

在项目中遇到使用bootstrap的navs导航，切换导航栏会导致echarts图表加载不出或者被压缩，解决办法如下：

1、html

            <div class="totalTab">
                <ul class="tab">
                    <li class="cur">
                        主页
                    </li>
                    <li>
                       分页
                    </li>
                </ul>
            </div>
	<div class="on" id="pie" style="width: 100%;height:400px;">
	</div>
	<div class="aa" id="pie1" style="width: 100%;height:400px;"></div>

2、css

.tab{
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
    display: flex;
}
.tab li{
    text-align:center;
    cursor:pointer;
    padding: 0.5rem 1rem;
}
.on{
    display:block;
}
.tab li.cur{
    color:#3265E3;
    border-bottom: 4px solid;
}

3、js

$(".tab li").click(function () {
          $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
          $(".chart-show").hide().eq($(this).index()).show();
          index = $(this).index();
          if (index == 0) {
			getHome();
          } else{
		  getSecond();
		  }
        });
function  getHome(){
			var myPieA = echarts.init(document.getElementById('pie'));
			myPieA.setOption({
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"//饼图显示数据和百分比
				},
				grid:{
					width:359,
					height:400
				},
				series: [
				{
					name:'张三'
					type:'pie',
					radius: ['40%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false,
							position: 'center'
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '30',
								fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data:[
					{
						value:221,
						name:'直接访问',
						itemStyle:{
							color:'#FF7F50'
						}
					},
					{
						value:215,
						name:'邮件营销',
						itemStyle:{
							color:'#87CEFA'
						}
					},
					{
						value:302,
						name:'联盟广告',
						itemStyle:{
							color:'#DA70D6'
						}
					},
					{
						value:15, 
						name:'视频广告',
						itemStyle:{
							color:'#32CD32'
						}
					},
					{
						value:115, 
						name:'搜索引擎',
						itemStyle:{
							color:'#32CD32'
						}
					},
					]
				}
				]
			})

		}
function getSecond(){
	var myPieB = echarts.init(document.getElementById('pie1'));
	myPieB.setOption({
	color: ['#3398DB'],
	tooltip : {
	trigger: 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
         }
         },
	grid: {
	  	left: '3%',
	    right: '4%',
		bottom: '3%',
		containLabel: true
		},
	 xAxis : [
		 {
			type : 'category',
			data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	axisTick: {
		alignWithLabel: true
			   }
			 }
	],
	yAxis : [
		{
		type : 'value'
		}
	],
	series : [
		{
		name:'直接访问',
		type:'bar',
		barWidth: '60%',
		data:[10, 52, 200, 334, 390, 330, 220]
			    }
			    ]
            })
		}

	})