echarts隐藏之后的显示问题

好久没有更新博客了，今天搞了快一天的网页自适应，头晕。。。因为最近开始做项目，项目中需要用到图表方面的知识，于是乎接触到了echarts，所以其实我也算是新手了。只是近几天弄了很久的关于图表隐藏之后再次显示，却无法显示出来的问题。在网上也搜寻了好久。都没有特别对口的答案，echarts图表一直是显示的到还没发现有什么异常，只是如果你想要做类似选项卡切换图表的隐藏和显示的话，这个问题就不得不直视了。废话讲了那么多，开始说解决方法。

     在解决之前需要知道原因：相信网上一搜，基本上就可以确定大多数的情况都是一样的，那就是echarts图表隐藏之后再次显示可能会涉及到没有高宽度的问题，或者你可以右击检查一下你的图表的宽度此时是0还是NaN!!!  那么知道没有高宽度，那么就需要在display:block显示之前给它一个宽高，这样就没有问题了。那么这个宽高的设置可以有两种设置方法（目前我可以知道的想到的），一是在行间设置宽高，这样的宽高度就是固定的，永远都是那么多，比如说这样

     

这样子设置之后的话，可通过设置一个按钮来显示图表，那么显示是成功了，但是如果想要自适应窗口大小，跟随窗口大小变化而变化，那么这种方式就不可取了，就需要使用一种相对的宽高了，你有没有想到呢？那就是当前窗口的大小了，window.innerHeight   window.innerWidth;那么如果是两个图表，像我这样的话，可以封装一个函数来设置图表的宽和高，像这样：

  

 

但是我先说我这种写法比较死，高度没有用窗口的高度，宽度的话窗口宽度太宽了，所以我大概减了80px;没有把对象抽象出来当成参数来传递，所以不具有代码的复用性，大家可以根据这个自行封装一个复用性高的函数，那么这就是为两个图表设置好了宽度和高度，接下来就是在显示之前调用一下该函数，那么就意味着在显示之前我的图表有了宽度和高度，那么就可以显示了，如果想要改变窗口大小的时候图表也跟着变化的话，那么就由需要做一点小工作，如下：

  后边的两个语句的意思是说（因为我有两个按钮，用于切换两个图表，那么每次按钮点击的时候都会自动去触发window.onresize事件，而不用等到我手动的去拖动窗口的时候，才去触发，这样的话就可以实现随时的自适应大小，而不会出现点击第一个按钮改变窗体大小之后，再去点击第二个按钮，会发现第二个按钮对应的图表没有根据之前变化的窗体大小而变化），所以要加上这么一句自动替我们触发resize事件，这是jquery的语法，不太清楚的童鞋可以百度一下。最后，还有一点:

这块代码就是自适应窗体大小的代码，这句和上面的trigger那句不冲突不重复的，一个是改变窗体大小，一个是点击按钮，两个都需要触发resize事件。

差不多就这些玩意儿了，大家可以根据自己的情况做相应的小调整，基本上就可以解决大多数这种类型的状况了。