TOP

echarts隐藏之后的显示问题
2017-10-10 12:44:19 】 浏览:9893
Tags:echarts 隐藏 之后 显示 问题

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

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

     

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

  

 

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

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

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

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

 

 

 

 

 


echarts隐藏之后的显示问题 https://www.cppentry.com/bencandy.php?fid=97&id=131430

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇设计模式之责任链模式 下一篇HTTP协议详解