twitter bootstrap 3 - Bootsrap tabs and Echarts -

am having issue displaying echarts on second tab. chart displayed on first tab on navigation second tab does'nt display

                                <ul class="nav nav-tabs" style="margin-bottom: 15px;">                                     <li class="active">                                         <a href="#campaign" data-toggle="tab">campaigns</a>                                     </li>                                     <li>                                         <a href="#subscribers" data-toggle="tab">subscribers</a>                                     </li>                             </ul>                             <div id="mytabcontent" class="tab-content">                                 <div class="tab-pane fade active in" id="campaign">                                     <div id="piechart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>                                  </div>                                 <div class="tab-pane fade" id="subscribers">                                     <div id="barchart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>                                 </div>                             </div> 

then hereis js displays chart

    var mychart = echarts.init(document.getelementbyid('piechart')); mychart.settheme({color:['#6cc66c','#418bca','#ff6600']}); piechartoption =  option = {     title : {         text: 'campaign analysis',         subtext: 'jackpot',         x:'center'     },     tooltip : {         trigger: 'item',         formatter: "{a} <br/>{b} : {c} ({d}%)"     },     legend: {         orient : 'vertical',         x : 'left',         data:['sent','pending','not delivered']     },     toolbox: {         show : true,         feature : {             mark : {show: true},             dataview : {show: true, readonly: false},             magictype : {                 show: true,                  type: ['pie', 'funnel'],                 option: {                     funnel: {                         x: '25%',                         width: '50%',                         funnelalign: 'left',                         max: 1548                     }                 }             },             restore : {show: true},             saveasimage : {show: true}         }     },     calculable : true,     series : [         {             name:'access source',             type:'pie',             radius : '55%',             center: ['50%', '60%'],             data:[                 {value:{{ $no}}, name:'sent'},                 {value:135, name:'pending'},                 {value:155, name:'not delivered'}             ]         }     ] }; mychart.setoption(piechartoption);    /*#########################         barchart            ##################################*/  var mybarchart = echarts.init(document.getelementbyid('barchart'));  var barchartoption = {   title: {     text: '某地区蒸发量和降水量',     subtext: '纯属虚构'   },   tooltip: {     trigger: 'axis'   },   legend: {     data: ['2014', '2015']   },   toolbox: {     show: true,     feature: {       mark: {         show: true       },       dataview: {         show: true,         readonly: false       },       magictype: {         show: true,         type: ['line', 'bar']       },       restore: {         show: true       },       saveasimage: {         show: true       }     }   },   calculable: true,   xaxis: [{     type: 'category',     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']   }],   yaxis: [{     type: 'value'   }],   series: [{     name: '2014',     type: 'bar',     data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],   }, {     name: '2015',     type: 'bar',     data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],   }] };  mybarchart.setoption(barchartoption); /*#########################         barchart            ##################################*/  $(function() {       $( "#tabs" ).tabs({         select: function(event, ui) {           console.log('calling chart.invalidatesize()');           chart.invalidatesize();         }       }); 

what cud solution this? please help..

}); 

the answer little late , not sure if found solution, resolution combination of echarts setoption , bootstrap's tab event.

like-

$('#mytabitem').on('shown.bs.tab', function (e) {          mychart.setoption(options); }) 

the above code reload chart mychart using echarts setoption callback bootstrap tab shown. more info on bootstrap tab events can found here.