今天早上一大早客户就反馈饼图的字显示不全,我这搭眼一看就知道适配出了问题

不过我的页面横向基本上都是用的百分比,而且我习惯用flex布局,基本上自己画的div都不会出现横着不对的问题,不过我看了一眼echart里面画布的样式

好家伙他是px的,这样的话我用的我的大屏电脑,有些笔记本可能就显示太大了,于是我找了个笔记本看了一下,我天啊还真是很大。而且这客户更奇葩,她是用的14英寸的笔记本,并且她还改了这个

 

 这样就很伤了,显示不全就很正常了,所以我们得想办法解决,没辙啊,他们要缩放我们只能适配下

原本我电脑看着还挺正常的

 但是在她们那显示就彻底变了

首先看这个Ecahrt就两部分比较占地方,一个是圆饼的大小,一个是它字的大小。 

那我们就得拿电脑屏幕窗口来判断了取多大,网上搜的方法是window.width能取到宽度,但是我写完之后width居然undefined,没办法只能自己打断点找了

 最后发现window里面还有个window,然后screen里看到了屏幕大小,这就好办了,我们首先把饼图的属性里字体大小改了

series: [
            {
              label:{ 
                  textStyle : {
                    fontSize : window.window.screen.width*0.006
                  }
                }
              },
            }
          ]

然后再把饼的大小给改了。

 

根据自己情况适当改,这样就可以按屏幕宽度来更改饼图整体大小

最后看客户那种缩放就正常了,我们的电脑也正常

整体适配解决难度并不是很难,而是我这次没想到有小屏电脑还缩放很大,而且chart还不能自己适配

 

 

Logo

前往低代码交流专区

更多推荐