关于我在vue中使用Echart饼图字超出边缘的这档事
今天早上一大早客户就反馈饼图的字显示不全,我这搭眼一看就知道适配出了问题不过我的页面横向基本上都是用的百分比,而且我习惯用flex布局,基本上自己画的div都不会出现横着不对的问题,不过我看了一眼echart里面画布的样式好家伙他是px的,这样的话我用的我的大屏电脑,有些笔记本可能就显示太大了,于是我找了个笔记本看了一下,我天啊还真是很大。而且这客户更奇葩,她是用的14英寸的笔记本,并且她还改了这
今天早上一大早客户就反馈饼图的字显示不全,我这搭眼一看就知道适配出了问题
不过我的页面横向基本上都是用的百分比,而且我习惯用flex布局,基本上自己画的div都不会出现横着不对的问题,不过我看了一眼echart里面画布的样式
好家伙他是px的,这样的话我用的我的大屏电脑,有些笔记本可能就显示太大了,于是我找了个笔记本看了一下,我天啊还真是很大。而且这客户更奇葩,她是用的14英寸的笔记本,并且她还改了这个
这样就很伤了,显示不全就很正常了,所以我们得想办法解决,没辙啊,他们要缩放我们只能适配下
原本我电脑看着还挺正常的
但是在她们那显示就彻底变了
首先看这个Ecahrt就两部分比较占地方,一个是圆饼的大小,一个是它字的大小。
那我们就得拿电脑屏幕窗口来判断了取多大,网上搜的方法是window.width能取到宽度,但是我写完之后width居然undefined,没办法只能自己打断点找了
最后发现window里面还有个window,然后screen里看到了屏幕大小,这就好办了,我们首先把饼图的属性里字体大小改了
series: [
{
label:{
textStyle : {
fontSize : window.window.screen.width*0.006
}
}
},
}
]
然后再把饼的大小给改了。
根据自己情况适当改,这样就可以按屏幕宽度来更改饼图整体大小
最后看客户那种缩放就正常了,我们的电脑也正常
整体适配解决难度并不是很难,而是我这次没想到有小屏电脑还缩放很大,而且chart还不能自己适配
更多推荐
所有评论(0)