echarts图表初始化到隐藏的div中造成宽高比例不对问题解决

问题描述：
最近在做Echarts，下图是两个Echarts图表，可以点击月视图和年视图来切换。我的思路是使用ajax获得数据后，初始化这两个图表，然后通过点击来切换，但是在将隐藏的div显示出来时，图表的长宽比例错乱，宽度被限定成了100px。如下图

这是因为在初始化图表时由于div被隐藏了，他的宽高无法获取，所以就自动给了一个宽度。下面是我的思路。话不多说，先看代码。
1.html代码

 <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">月</a></li><!--默认选中-->
    <li><a href="#tab2" data-toggle="tab" >年</a></li>
 </ul>

<div class="tab-content">
   
   <div class="active" id="tab1"><!--默认显示-->
          <div id="Echarts1" style="width:100%;height:450px;"></div>
   </div>
   <div class="" id="tab2">
         <div id="Echarts2"  style="width:100%;height:450px;"></div>
   </div>
</div>

前端使用class中avtive的有无来控制div标签的显示和隐藏。默认情况下Echarts1显示，Echarts2隐藏，所以绘制图表时，由于Echarts2被隐藏了，Echarts无法获取到隐藏的div长宽，所以长宽比例出现了问题。
2.jQuery代码

ajaxs("url",{
       ..参数..
},function (result) {
      if (判断){
              Echarts1(result);
              BjjjxEcharts_year(result);
      }
});

function Echarts1(jsondata) {
     var myChart_Echarts1 = echarts.init(document.getElementById('Echarts1'), 'theme');
     ..参数/数据..
     //根据窗口的大小变动图表
     window.addEventListener("resize", function () {
            myChart_Echarts1.resize();
     });
}
function Echarts2(jsondata) {
     $("#Echarts2").css('width', $("#Echarts1").width());//在第二个图表初始化前，将第一个图表的宽度赋值给第二个
     var myChart_Echarts2 = echarts.init(document.getElementById('Echarts2'), 'theme');
     ..参数/数据..
      //根据窗口的大小变动图表
     window.addEventListener("resize", function () {
            myChart_Echarts2.resize();
     });
}

主要就是下面这行代码，在Echarts2初始化前，获得Echarts1的宽度。因为Echarts1是默认显示的，他的长宽是正常的。
$("#Echarts2").css(‘width’, $("#Echarts1").width());