关于在bootstrap的tab栏中渲染echats图表，切换t…

2018-06-24 00:57:33来源：未知阅读 ()

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

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

其html代码为：

 1 <div class="col-xs-6" style="padding:10px;">
 2   <ul class="nav nav-tabs" id="myTab1">
 3      <li><a href="##" style="font-weight: 700;color:black;">访客年龄统计</a></li>
 4      <li class="active"><a href="#home11" data-id="0">年</a></li>
 5      <li><a href="#home12" data-id="1">月</a></li>
 6      <li><a href="#home13" data-id="2">日</a></li>
 7   </ul>
 8   <div class="tab-content">
 9      <div class="tab-pane active" id="home11">
10         <!-- echarts容器 -->
11        <div class="chart">
12           <div id="main_11" style="height:400px;"></div>
13        </div>
14      </div>
15      <div class="tab-pane" id="home12">
16        <div class="chart">
17           <div id="main_12" style="height:400px;"></div>
18        </div>
19      </div>
20      <div class="tab-pane" id="home13">
21        <div class="chart">
22           <div id="main_13" style="height:400px;"></div>
23        </div>
24      </div>
25    </div>
26 </div>

js代码为：

 1 var myChart11 = echarts.init(document.getElementById('main_11'));
 2 var myChart12 = echarts.init(document.getElementById('main_12'));
 3 var myChart13 = echarts.init(document.getElementById('main_13'));
 4 // 指定图表的配置项和数据
 5 option = {
 6   title: {
 7     text: '',
 8     left: 'center'
 9   },
10   tooltip: {
11     trigger: 'item',
12     formatter: '{a} <br/>{b} : {c}'
13   },
14   legend: {
15     left: 'left',
16     data: ['全部', '男', '女']
17   },
18   xAxis: {
19     type: 'category',
20     name: 'x',
21     splitLine: { show: false },
22     data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
23   },
24   grid: {
25     left: '3%',
26     right: '4%',
27     bottom: '3%',
28     containLabel: true
29   },
30   yAxis: {
31     type: 'log',
32     name: 'y'
33   },
34   series: [
35     {
36       name: '全部',
37       type: 'line',
38       data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
39     },
40     {
41       name: '男',
42       type: 'line',
43       data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
44     },
45     {
46       name: '女',
47       type: 'line',
48       data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
49     }
50   ]
51 };
52 // 使用刚指定的配置项和数据显示图表。
53 myChart11.setOption(option);
54 myChart12.setOption(option);
55 myChart13.setOption(option);

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

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

 1  var arr=[];
 2  var myChart11 = echarts.init(document.getElementById('main_11'));
 3  var myChart12 = echarts.init(document.getElementById('main_12'));
 4  var myChart13 = echarts.init(document.getElementById('main_13'));
 5  // 指定图表的配置项和数据
 6  option = {
 7    title: {
 8      text: '',
 9      left: 'center'
10     },
11    tooltip: {
12      trigger: 'item',
13      formatter: '{a} <br/>{b} : {c}'
14    },
15    legend: {
16      left: 'left',
17      data: ['全部', '男', '女']
18    },
19    xAxis: {
20      type: 'category',
21      name: 'x',
22      splitLine: { show: false },
23      data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
24    },
25    grid: {
26      left: '3%',
27      right: '4%',
28      bottom: '3%',
29      containLabel: true
30    },
31    yAxis: {
32      type: 'log',
33      name: 'y'
34    },
35    series: [
36      {
37        name: '全部',
38        type: 'line',
39        data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
40      },
41      {
42        name: '男',
43        type: 'line',
44        data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
45      },
46      {
47        name: '女',
48        type: 'line',
49        data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
50      }
51    ]
52  };
53  // 使用刚指定的配置项和数据显示图表。
54  myChart11.setOption(option);
55  arr.push(myChart11);
56  myChart12.setOption(option);
57  arr.push(myChart12);
58  myChart13.setOption(option);
59  arr.push(myChart13);
60  // 给tab导航按钮注册事件，让其渲染
61  $('#myTab1 li a').on('shown.bs.tab', function (e) {
62    for (var i = 0; i < arr.length; i++) {
63      arr[i].resize();
64    }
65  });
66  // 当浏览器窗口大小出现变化时，重新渲染
67  $(window).resize(function () {
68     for (var i = 0; i < arr.length; i++) {
69       arr[i].resize();
70    }
71  });