问题描述
网页中十分常见的tab分页，通过切换头部tab，控制主体内容的显示与隐藏。如下图所示，有图表的是最后一个tab分页，在切换到该分页时，其中的图表没有占满一行，蜷缩在页面左边。
Echarts图表显示问题
Echarts展示一张图表时，承载其的html容器一定要设置好宽度，所以想着是不是页面结构问题，Echarts图表容器的宽度设置出错。检查发现，肯定是设置了宽高的。
图表页面结构与样式
缘由追查
查看图表容器，发现容器元素宽度被设置为100px了；说明是Echart源码进行了某些处理。
Echarts3源码中获取容器宽高的函数如下：
_getSize: function (whIdx) {
var opts = this._opts;
var wh = ['width', 'height'][whIdx];
var cwh = ['clientWidth', 'clientHeight'][whIdx];
var plt = ['paddingLeft', 'paddingTop'][whIdx];
var prb = ['paddingRight', 'paddingBottom'][whIdx];
if (opts[wh] != null && opts[wh] !== 'auto') {
return parseFloat(opts[wh]);
}
var root = this.root; // IE8 does not support getComputedStyle, but it use VML.
var stl = document.defaultView.getComputedStyle(root);
return (root[cwh] || parseInt10(stl[wh]) || parseInt10(root.style[wh])) - (parseInt10(stl[plt]) || 0) - (parseInt10(stl[prb]) || 0) | 0;
},
这才发现问题所在，获取图表宽度时，由于图表所在的分页display:none，所以root.clientWidth获取失败；
parseInt10(stl[wh]) => parseInt(document.defaultView.getComputedStyle[width],10) => parseInt('100%',10) => 100
这样也就解释为什么我们的图表宽度都是100px了。
解决方案
方案1
既然获取不到clientWidth的值，那么我们就在初始化图表对象前，手动设置容器root元素的宽度
$('.chart-block').css('width', $('.header-tabs').width()); // echarts.init之前
var playTimesChart = echarts.init($('.play-times-chart').get(0)),
// $('.header-tabs').width() => 图表元素父级宽度
方案2
在切换到图表分页时，让初始化后的图表重新resize下
// tab页切换事件函数中
playTimesChart.resize(); // 改变图表尺寸，在容器大小发生改变时需要手动调用。
调整后，图表恢复正常显示
