echarts - 使用echarts过程中遇到的问题(pending...)

 1. 配合tab切换时，被display:none的元素init设置echarts失败

2018-11-09  18:09:35

现象描述：有一个tabs选项卡，每个切换项A、B中都有使用echarts，默认展示的A项中的ecarts初始化和绘制都没问题。

而第二个默认隐藏项B就是一片空白。检查B的echarts盒子还在且是css中设置的宽高大小。但是内部canvas为空，即图表没有绘制。

找问题过程：

假如我的echarts图表所在元素为：div#echartsDiv。

并将其父元素设置 display:none

然后我console一下document.getElementById('echartsDiv');

展开抛出的对象会发现：他的clientWidth和Height都是0，甚至scroll和offset系列的宽高皆为0（看图别介意id名对不上）

对比一个父元素没有隐藏的元素，他的宽高就很正常：

这样我们就明白了，echarts绘制之前是要获取要绘制区域的宽高的，如果皆为0那肯定失败的。

找到问题原因，就是解决： 既然根出在初始化时的元素宽高上，那我们开局就设置宽高即可。

我这里的主要问题是场景用在移动端，元素宽度肯定要随着设备的屏幕改变的。

如果直接在style上设置（注意，我尝试在css上设置了，没用），不能设置固定的数值。

所以我利用js的方法在js的开端设置了下：

let echartsW= $('.echarts-box').width();
$('.echarts-cont').css('width',echartsW);

echarts-box是我存放图标的总的父元素，echarts-cont是我所有图标公用的类名。

然后如果在pc端做响应式的页面时，如果遇到需要满足当屏幕大小被用户扯着随机变时图标也要改变的需求时，可以试试下边这个：

$(window).resize(function () {
  let echartsW= $('.echarts-box').width();
  $('.echarts-cont').css('width',echartsW);
});