关于在bootstrap的tab栏中渲染echats图表，切换tab时echats不显示问题

在开发过程中遇到这样个问题：

　　利用bootstrap中的tab栏，每当点击tab栏的导航时，echats仅仅只渲染第一个tab的内容，切换tab时，echats图表不显示。

其html代码为：

 <div class="col-xs-6" style="padding:10px;">
   <ul class="nav nav-tabs" id="myTab1">
      <li><a href="##" style="font-weight: 700;color:black;">访客年龄统计</a></li>
      <li class="active"><a href="#home11" data-id="0">年</a></li>
      <li><a href="#home12" data-id="1">月</a></li>
      <li><a href="#home13" data-id="2">日</a></li>
   </ul>
   <div class="tab-content">
      <div class="tab-pane active" id="home11">
         <!-- echarts容器 -->
        <div class="chart">
           <div id="main_11" style="height:400px;"></div>
        </div>
      </div>
      <div class="tab-pane" id="home12">
        <div class="chart">
           <div id="main_12" style="height:400px;"></div>
        </div>
      </div>
      <div class="tab-pane" id="home13">
        <div class="chart">
           <div id="main_13" style="height:400px;"></div>
        </div>
      </div>
    </div>
 </div> 

js代码为：

 var myChart11 = echarts.init(document.getElementById('main_11'));
 var myChart12 = echarts.init(document.getElementById('main_12'));
 var myChart13 = echarts.init(document.getElementById('main_13'));
 // 指定图表的配置项和数据
 option = {
   title: {
     text: '',
     left: 'center'
   },
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c}'
   },
   legend: {
     left: 'left',
     data: ['全部', '男', '女']
   },
   xAxis: {
     type: 'category',
     name: 'x',
     splitLine: { show: false },
     data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
   },
   grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
   },
   yAxis: {
     type: 'log',
     name: 'y'
   },
   series: [
     {
       name: '全部',
       type: 'line',
       data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
     },
     {
       name: '男',
       type: 'line',
       data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
     },
     {
       name: '女',
       type: 'line',
       data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
     }
   ]
 };
 // 使用刚指定的配置项和数据显示图表。
 myChart11.setOption(option);
 myChart12.setOption(option);
 myChart13.setOption(option);

　　此代码的结果为上边图片所展示的效果，经过查找之后发现“月”和“日”所对应的echats图表的宽度为0，根本就没有画在所对应的盒子中，也就是说根本就没有渲染。

　　后来经过查资料发现了一个方法可以解决这个问题，那便是给tab栏中的导航栏注册“shown.bs.tab”事件，在事件里边让每个echats渲染一遍。

  var arr=[];
  var myChart11 = echarts.init(document.getElementById('main_11'));
  var myChart12 = echarts.init(document.getElementById('main_12'));
  var myChart13 = echarts.init(document.getElementById('main_13'));
  // 指定图表的配置项和数据
  option = {
    title: {
      text: '',
      left: 'center'
     },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
      left: 'left',
      data: ['全部', '男', '女']
    },
    xAxis: {
      type: 'category',
      name: 'x',
      splitLine: { show: false },
      data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'log',
      name: 'y'
    },
    series: [
      {
        name: '全部',
        type: 'line',
        data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
      },
      {
        name: '男',
        type: 'line',
        data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
      },
      {
        name: '女',
        type: 'line',
        data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart11.setOption(option);
  arr.push(myChart11);
  myChart12.setOption(option);
  arr.push(myChart12);
  myChart13.setOption(option);
  arr.push(myChart13);
  // 给tab导航按钮注册事件，让其渲染
  $('#myTab1 li a').on('shown.bs.tab', function (e) {
    for (var i = 0; i < arr.length; i++) {
      arr[i].resize();
    }
  });
  // 当浏览器窗口大小出现变化时，重新渲染
  $(window).resize(function () {
     for (var i = 0; i < arr.length; i++) {
       arr[i].resize();
    }
  });

　　仅仅只是添加了一个数组，将要渲染的盒子方法添加到数组里边，当事件被触发的时候，通过遍历这个数组，将这些方法再调用一次，这样就可以解决以上问题。