echarts 窗体大小-echarts隐藏后显示问题

2023-08-23 0 7,546 百度已收录

好久没更新博客了,明天快三天就要做网页适配了,耳朵嗡嗡响。 。 。 由于最近开始做项目,项目中需要用到图表的知识,所以接触了echarts,所以虽然我是菜鸟。 只是最近几天,我在图表隐藏然后再次显示的问题上工作了很长时间,但无法显示。 也在网上搜救了好久。 没有非常对应的答案。 echarts图表依然显示到没有发现异常的地步。 只是如果你想像tab切换一样隐藏和显示图表,就得直接看这个问题了。 废话讲了这么多,开始讲解决技巧了。

解决之前需要先知道原因:相信在网上搜索之后,基本可以确认大部分情况都是一样的,即隐藏后echarts图表的显示可能会涉及到没有的问题粗细比较高,或者你可以右键检查一下你的图表的长度此时是否为0或者NaN!!! 所以你知道没有高度和厚度,所以在display: block显示之前需要给它一个宽度和高度,这样就没有问题了。这样设置宽度和高度有两种方法(如据我能想到的),一是设置行与行之间的宽度和高度,所以宽度和高度是固定的,总会有这么多echarts 窗体大小,例如像这样

echarts 窗体大小-echarts隐藏后显示问题

这样设置完之后,就可以通过设置一个按钮来显示图表了。 这样就显示成功了,而如果你想适应窗口大小,跟随窗口大小的变化,那么这些方法都不可取,需要使用一个相对宽度和高度,你有没有想过? 即当前窗口的大小,window.innerHeightwindow.innerWidth; 所以如果有两个图表,就像我一样,你可以封装一个函数来设置图表的宽度和高度,如下所示:

而且首先说一下,我的写法比较死板,高度没有使用窗口的高度,而且窗口的长度太宽,所以我减少了80px左右; 我没有将对象作为参数传递,所以没有代码复用根据这个,你可以自己封装一个复用性高的函数,所以这是给两个图表设置长度和高度,然后调用之前的函数显示echarts 窗体大小,也就是说在显示之前我的图表有长度和高度,所以可以显示。 如果你想改变窗口大小,图表也会相应改变,所以你需要做一点工作,如下:

echarts 窗体大小-echarts隐藏后显示问题

下面两句的意思是(因为我有两个图表切换的按钮,这样每次点击按钮的时候我都会手动触发window.onresize风暴,而不是等到我自动拖动窗口的时候移动了,就会触发,这样就可以随时实现自适应大小,不用点击第一个按钮改变窗口大小,然后点击第二个按钮,你会发现第二个按钮对应的图表没有根据之前改变的表单大小进行改变),所以我们需要添加这么一句来为我们手动触发resize风暴。 最后,还有一点:

这段代码是适配窗口大小的代码。 这句话与前面的触发句并不冲突。 一种是更改窗口的大小,另一种是单击按钮。 两者都需要触发调整大小风暴。

就是这样。 你可以根据自己的情况做一些小的调整,基本上可以解决大部分这类情况。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 echarts echarts 窗体大小-echarts隐藏后显示问题 https://www.wkzy.net/game/144777.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务