关于echart中使用width:100%与display:none中图表不能正常显示的问题

先查看需求

    要求类似于web端tab的样式，点击切换。因为是在移动端的应用，为了适配，宽度一般都采用%来表示，移动端宽度设置为100%
当echart对应的div采用display:none,
代码如下

<div id="container">
	<div id="map1"  style="width:100%;height:300px;"></div>
	<div id="map1_1" style="width:100%;height:300px;display:none"></div>
</div>
<div class="stationList" style="width: 100%;text-align: center;">
	<ul id="tab" style="width:45%;margin:0px auto">
		 <li id="tab1" class="selected" style="width:48%">上一页</li>
		 <li id="tab2" style="width:48%">下一页</li>
	</ul>
</div>

	var currentIndex = 0;
		var $contents = $('#container>div')
		$("#tab>li").click(function(){
   
			$contents[currentIndex].style.display ="none";
			var index =$(this).index();
			$contents[index].style.display = "block";
			$(this).addClass("selected").siblings().removeClass("selected");
			currentIndex = index
		})
		
		$