关于我在vue中使用Echart饼图字超出边缘的这档事

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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