解決Bootstrap 標籤頁(Tab)插件切換echarts不顯示問題

一、參考鏈接:https://blog.csdn.net/qq_24313955/article/details/78363981bootstrap

問題描述:在echarts跟bootstrap選項卡整合的時候,默認第一個選中選項卡能夠正常加載echarts圖表,可是切換其餘選項的時候不能渲染出其餘選項卡echarts圖表。(這裏暫時未考慮自適應問題)。數組

因爲使用的格式和參考不同,因此本身貼一下,方便本身之後使用。echarts

二、在js文件頁面最上面定義一個js數組。如var charts = new Array();
由於個人主頁是根據$(function(){  ..... })。
而後在裏面.....位置寫了以下所示的,使用調用方法進行處理的。
spa

chart5 = ec.init(document.getElementById('chart5'));
barChart2(data2, chart5, "xxxx");

具體這裏再也不展現。.net

三、而後呢,在你調用的方法,最下面加上charts.push(chart);便可。code

chart.setOption(memoryOption, true);
charts.push(chart);

四、而後呢,js文件最後面加上以下所示代碼便可。blog

 1 //解決切換tab,非默認的柱狀圖表格不顯示問題
 2 $(function(){
 3     //console.log(charts);//打印顯示是否添加進去
 4     $(window).resize(function() {
 5         for(var i = 0; i < charts.length; i++) {
 6             charts[i].resize();
 7         }
 8     });
 9     
10     //data-toggle="pill仍是data-toggle="tab" 根據前面所用標籤頁的不一樣來選擇。我使用的是data-toggle="tab"。
11     //解決tab切換不顯示問題 在加載窗口後從新渲染。
12     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
13         for(var i = 0; i < charts.length; i++) {
14             charts[i].resize();
15         }
16     });
17     
18 })

而後呢,你點擊你的tab切換,就能夠看到報表能夠正常顯示了的。get

 

待續.....it

相關文章
相關標籤/搜索