ECharts踩坑--＞指定图表容器大小出错

ECharts踩坑–>指定图表容器大小出错

---

一、我遇到的问题

我们在开发过程中可能需要使用到多个ECharts图表，如果需求是在多个标签中使用多个图表，每个图表需要全屏展示，最初页面加载时第一个标签内的图表能正常显示大小，但是切换标签后，其他标签内的图表宽度丢失，如下图所示：

代码如下：

二、问题分析

遇到这个问题第一步是查官方文档（ECharts图表容器及大小），其中说明了三种设定容器大小的方法如下所示：

1. 在 HTML 中定义有宽度和高度的父容器（推荐）
2. 指定图表的大小
3. 响应容器大小的变化

使用以上方法能完美设置图表容器大小啦啦啦啦啦… 但是，总有些例外情况 ~ ~
我使用以上三种方法后，还是没能让第二个图表宽度正常，此时已经陷入自我怀疑 ~ ~ ,难道我是看了个假官网？？？
但是问题还是要解决的，我们分析一下，虽然图表大小没有按照预期，但是我们可以发现图表的高度是正常展示的，但是宽度丢失啦，这是因为echarts绘制图表计算宽度的时候，由于第二个tab的属性display: none;所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度为100px
EChart源码：

Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

三、问题解决

所以现在我们就清楚了，不能使用百分比来设置容器的大小，我们将容器的小使用具体的像素值来试一下，结果就能正常全屏充满啦~~

四、问题扩展

又有同学要说了，我想要图表按照屏幕宽度自适应，我不要设置固定的大小呀呀呀呀呀，那这里给大家推荐一个很好用的工具 （postcss），能将px转换为vw|vh，只要设置好转换比例，直接使用px就能实现自适应啦。希望能帮到你 >_<

接下来又有同学说，我想要让图表根据浏览器窗口变化自适应大小该怎么办呢？这里又会又一些新坑，详情请看我的下一篇 ECharts踩坑 --＞图表大小根据浏览器视窗变化自动响应