關於在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();
   }
 });

　　僅僅只是添加了一個數組，將要渲染的盒子方法添加到數組里邊，當事件被觸發的時候，通過遍歷這個數組，將這些方法再調用一次，這樣就可以解決以上問題。