echarts大屏字体自适应的方法步骤
用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况,这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size.
获取屏幕宽度并计算比例
functionfontSize(res){
letdocEl=document.documentElement,
clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if(!clientWidth)return;
letfontSize=100*(clientWidth/1920);
returnres*fontSize;
}
在需要设置字体的地方可以这样写,
如在1920屏宽下字体设置为12px,就可以传入0.12给fontSizefontSize(0.12)
tooltip:{
trigger:'axis',
axisPointer:{//坐标轴指示器,坐标轴触发有效
type:'shadow'//默认为直线,可选为:'line'|'shadow'
},
textStyle:{
fontSize:fontSize(0.12),
}
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
10 祝孙辈生日祝福语简短
11 恋人跨年祝福语大全简短
12 考大学敬酒简短祝福语
13 开工投产大吉祝福语 简短
14 偶然结婚祝福语朋友简短
15 感谢学长学姐祝福语简短
16 戏精的祝福语简短
17 我要结婚祝福语简短
18 婚前女儿生日祝福语简短