Bootstrap tabs and Echarts - twitter-bootstrap-3

Question

am having an issue with displaying my Echarts on the second tab. The chart is only displayed on the first tab but on navigation to the second tab it doesn't display
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">
Campaigns
</li>
<li>
Subscribers
</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 the js that displays the 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 be the solution to this?
});

Answer 1

ECharts documentation has mentioned
Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So resize should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in opts explicitly.
So every time you switch to a new tab, just call the resize function on the chart instance:
chartInstance.resize()

Answer 2

The answer is a little late and I am not sure if you found a solution, but the resolution to this would be a combination of echarts setOption and Bootstrap's Tab event.
Like-
$('#myTabItem').on('shown.bs.tab', function (e) {
myChart.setOption(options);
})
The above code will reload the chart mychart using echarts setOption callback as soon as the Bootstrap Tab is shown. More info on Bootstrap Tab events can be found here.