h5做echarts图表Tab切换时图表被压缩或不显示的问题

项目中遇到的坑，在这里记录一下
单纯的写个tab切换图表，是这样显示的。。。

很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。
但是，只要我们在切换的时候调用一下被使用的函数，图表就会完整显示。
代码展示：

HTML
<div class="totalTab">
		<ul class="tab" style="margin-top: 10px;">
			<li class="cur">
				图一
			</li>
			<li>
				图二
			</li>
		</ul>
	</div>
	<!-- <span style="padding: 10px 0 0 0">一级指标均分动态图</span> -->
	<div class="on aa" id="pie" style="width: 100%;height:400px;">
	</div>
	<div class="aa" id="pie1" style="width: 100%;height:400px;">
</div>

css
<style type="text/css">
	.aa,.bb,.cc,.dd{margin:0;padding:0;display:none;}
	.tab,.secondTab,.threeTab,.fourTab{margin:0;padding:0;list-style:none;overflow:hidden;display: flex;justify-content:flex-end;}
	.tab li,.secondTab li,.threeTab li,.fourTab li{width:80px;height:30px; text-align:center;line-height:30px;cursor:pointer; }
	.on{display:block;}
	.tab li.cur,.secondTab li.cur,.threeTab li.cur,.fourTab li.cur{background:#169BD5;border-radius: 5px;margin-right: 5px;}
	p{
		margin-top:10px;
	}
	.totalTab{
		display: flex;
		justify-content: space-around;
	}
</style>

js
<script type="text/javascript">
	$(document).ready(function(){
		a1();
		$(".tab li").click(function(){
			$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
			$(".aa").hide().eq($(this).index()).show();
		        var $index=$(this).index();
			    if($index==0){
			 	   a1();
			     }else{
			 	a2();
			   }
		});
		function  a1(){
			var myPieA = echarts.init(document.getElementById('pie'));
			myPieA.setOption({
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				legend: {
					orient: 'horizontal',
					x: 'right',
					bottom:20,
					left:0,
					itemWidth:13,
					data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				},
				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 a2(){
			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]
			    }
			    ]
            })
		}

	})
</script>

这样写的话，就能正常显示了