Solve Bootstrap tabs (Tab) plug-in switch echarts not display problems

1, reference attachment: https://blog.csdn.net/qq_24313955/article/details/78363981

Problem Description: In echarts with integrated bootstrap tab, the default tab to select the first load properly echarts chart, but switch to another option when you can not render the other tabs echarts chart. (Here not yet considered adaptive problem).

Since the format used and the reference is not the same, so their stickers to facilitate their future use.

2, a js file js array at the top of the page definition. The var charts = new Array ();

Because my home is based on the $ (function () {.....}).

Then write position inside ..... as shown below, using the method for processing calls.

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

Specific not show here.

3, then, you call the method, the bottom plus charts.push (chart); can be.

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

4, And then, js rearmost document to add the code is shown below.

// solve switching tab, a non-default histogram table does not show the problem 
$ ( function () {
     // console.log (Charts); // print displays whether to add into the 
    $ (window) .resize ( function () {
         for ( var I = 0; I <charts.length; I ++ ) { 
            Charts [I] .resize (); 
        } 
    }); 
    
    // Data-Toggle = "Pill or data-toggle =" tab "as used in accordance with the foregoing various tabs to choose. I am using a-Toggle = the Data "tab." 
    // solve the tab switching does not show the problem re-rendered after loading window. 
    $ ( 'a [the Data-Toggle = "tab"]'). oN ( 'Shown .bs.tab ', function (E) {
         for ( var I = 0; I <charts.length; I ++ ) { 
            Charts [I] .resize ();
        }
    });
    
})

And then, you click on the tab you switch, you can see the reports can be displayed properly.