echarts隐藏之后的显示问题

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/Trista-l/p/7309454.html

echarts隐藏之后的显示问题相关推荐

python 横坐标只显示部分数据_解决echarts中横坐标值显示不全(自动隐藏)问题
echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示如果我们想显示全,则需要在xAxi ...
echarts中横坐标值显示不全(自动隐藏)解决方案
echarts中横坐标值显示不全自动隐藏解决方案 echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴数据过多时,echarts会自 ...
echarts隐藏掉一条曲线，并且tooltip提示框中不显示
echarts隐藏掉一条曲线,并且tooltip提示框中不显示两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口
原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口周银辉现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...
一个列用render渲染的时候，如果列宽度不够，内容多出的部分会被隐藏，无法显示。这时需要一个鼠标滑过提示全部内容的tip功能。...
一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示.这时需要一个鼠标滑过提示全部内容的tip功能. 渲染的函数写成如下: function renderHallName( ...
正则表达式实现手机号中间4位数隐藏或者只显示末尾四位数
下面看下正则表达式实现手机号中间4位数隐藏或者只显示末尾四位数 ? 1 2 // 匹配手机号首尾,以类似"123****8901"的形式输出 '12345678901'.repla ...
jquery显示隐藏切换_jQuery显示，隐藏，切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...

echarts隐藏之后的显示问题

echarts隐藏之后的显示问题相关推荐

最新文章

热门文章