问题描述

网页中十分常见的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();  // 改变图表尺寸，在容器大小发生改变时需要手动调用。

调整后，图表恢复正常显示