bootstrap tab页签插件显示charts图表问题，激活的页签图表显示没问题，非激活的页签图表显示有问题

解决这个问题很简单，只需要在页签切换的事件中把图表就可以了。

1.bootstrap tab页签代码如下

<!-- 选项卡菜单-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#container1" role="tab">页签1</a></li>
    <li><a href="#container2" role="tab">页签2</a></li>
    <li><a href="#container3" role="tab">页签3</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content" style="display: flex; min-height: 290px;">
    <div id="container1" class="tab-pane  in active" style="width: 100%;max-height:290px;">
    </div>
    <div id="container2" class="tab-pane  " style="width: 100%;max-height:290px;">
    </div>
    <div id="container3" class="tab-pane " style="width: 100%;max-height:290px;">
    </div>
</div>

2.页签切换事件代码

$('a[role="tab"]').on('shown.bs.tab', function (e) {   //role="tab" 就是上面的超链接的属性
     //target得到的就是上面选项卡面板的div的id,比如说切换到第2个页签，target为#container2
     var target = $(this).attr('href');              
     $(target).highcharts().reflow();  //重新渲染，这是highcharts方法
     $(target).resize();   //这是echarts方法
});