echarts隐藏之后的显示问题
好久没有更新博客了，今天搞了快一天的网页自适应，头晕。。。因为最近开始做项目，项目中需要用到图表方面的知识，于是乎接触到了echarts，所以其实我也算是新手了。只是近几天弄了很久的关于图表隐藏之后再次显示，却无法显示出来的问题。在网上也搜寻了好久。都没有特别对口的答案，echarts图表一直是显示的到还没发现有什么异常，只是如果你想要做类似选项卡切换图表的隐藏和显示的话，这个问题就不得不直视了。废话讲了那么多，开始说解决方法。
在解决之前需要知道原因：相信网上一搜，基本上就可以确定大多数的情况都是一样的，那就是echarts图表隐藏之后再次显示可能会涉及到没有高宽度的问题，或者你可以右击检查一下你的图表的宽度此时是0还是NaN!!! 那么知道没有高宽度，那么就需要在display:block显示之前给它一个宽高，这样就没有问题了。那么这个宽高的设置可以有两种设置方法（目前我可以知道的想到的），一是在行间设置宽高，这样的宽高度就是固定的，永远都是那么多，比如说这样
这样子设置之后的话，可通过设置一个按钮来显示图表，那么显示是成功了，但是如果想要自适应窗口大小，跟随窗口大小变化而变化，那么这种方式就不可取了，就需要使用一种相对的宽高了，你有没有想到呢？那就是当前窗口的大小了，window.innerHeight window.innerWidth;那么如果是两个图表，像我这样的话，可以封装一个函数来设置图表的宽和高，像这样：
但是我先说我这种写法比较死，高度没有用窗口的高度，宽度的话窗口宽度太宽了，所以我大概减了80px;没有把对象抽象出来当成参数来传递，所以不具有代码的复用性，大家可以根据这个自行封装一个复用性高的函数，那么这就是为两个图表设置好了宽度和高度，接下来就是在显示之前调用一下该函数，那么就意味着在显示之前我的图表有了宽度和高度，那么就可以显示了，如果想要改变窗口大小的时候图表也跟着变化的话，那么就由需要做一点小工作，如下：
后边的两个语句的意思是说（因为我有两个按钮，用于切换两个图表，那么每次按钮点击的时候都会自动去触发window.onresize事件，而不用等到我手动的去拖动窗口的时候，才去触发，这样的话就可以实现随时的自适应大小，而不会出现点击第一个按钮改变窗体大小之后，再去点击第二个按钮，会发现第二个按钮对应的图表没有根据之前变化的窗体大小而变化），所以要加上这么一句自动替我们触发resize事件，这是jquery的语法，不太清楚的童鞋可以百度一下。最后，还有一点:
这块代码就是自适应窗体大小的代码，这句和上面的trigger那句不冲突不重复的，一个是改变窗体大小，一个是点击按钮，两个都需要触发resize事件。
差不多就这些玩意儿了，大家可以根据自己的情况做相应的小调整，基本上就可以解决大多数这种类型的状况了。
最新文章
- php二进制安全的含义
- 10个调试Java的技巧
- Centos7 安装codeblock( 转载)
- android广播接收器BroadcastReceiver
- SOAP和WSDL的一些必要知识（转）
- 【转】 Volley NegativeArraySizeException 解决
- running android lint has encountered a problem
- oracle 基本语句练习(一) where, between ,null, like,转义字符,order by
- jquery 处理密码输入框（input type="password" ） 模仿placeholder
- 利用RTE创建自定义软件安装包（一）
- Basic REST API Design
- 鼠标点击 input，显示瞬间的边框颜色，对之修改与隐藏
- 《java入门第一季》之面向对象面试题（代码块一网打尽）
- 我眼中的 Nginx（五）：Nginx — 子请求设计之道
- .NET、PHP、MySql、JS中的时间戳你每次是手写还是复制？这篇文章让你一次性搞懂
- windows10 右键 manage 没反应
- 方法重载（overroad）和方法覆盖（override）------java基础知识总结
- C# mysql 插入数据，中文乱码
- POJ 2552
- 20145101《Java程序设计》第二周学习总结