在开发过程中遇到这样个问题：
利用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 });仅仅只是添加了一个数组，将要渲染的盒子方法添加到数组里边，当事件被触发的时候，通过遍历这个数组，将这些方法再调用一次，这样就可以解决以上问题。
更多专业前端知识，请上 【猿2048】www.mk2048.com