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 婆婆高寿祝福语大全简短