关于echart在隐藏与显示轮替中的div加载显示为空的原因分析

今天遇到一个需求，需要用到echart将经济数据显示出来

加载显示都没问题！！OK

需求深入后发现要将经济数据分成农业跟工业，每个镇街都会在这两个方面中显示相应的数据，其他数据则隐藏掉。

所以要将显示的数据分农业跟工业显示

难度不大，半天就搞定了！

运行，显示，发现工业数据显示竟然为空！！

我以为是数据问题，打点跟踪后，发现不是，数据正确！！

再分析认为是js代码问题，搞了一整天发现也不是，js代码没问题！！

后面上网查了一下“echart 隐藏图表”找到了答案，也是在csdn论坛的大神解答的

http://blog.csdn.net/chenxueshanblog/article/details/72461113

以上是显示空白的原因！！

这是因为ECharts 没有获取到div的高宽而导致初始化失败，这时候可以：1.明确指定div的style.width和style.height 2：在div显示后手动调用 echartsInstance.resize 调整尺寸。

我在div中显式地声明具体的width跟height

<div id="wrapper_economicover" class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<h2 class="chartTitle"><i class="fa fa-database" style="font-size:16px; color: #9950da; margin-right: 8px;"></i>全区规模以上企业主要工业经济指标</h2>
                        <div class="echarts" id="echarts-economicover-chart" style="width:285px;height: 285px"></div>
                    </div>
                </div>

就这样，echart就可以正常显示

一个小问题困扰了将近三天的时间