当前位置: 首页 > Web前端 > CSS

echarts大屏字体自适应

时间:2023-03-31 12:38:05 CSS

在使用echarts做大屏可视化的时候,会遇到不用电脑投屏而是直接在大屏打开的情况。这时候在大屏幕下固定px为单位的字体会显得很小。一种解决方案是以rem为单位,根据屏幕的宽度调整html的font-size。获取屏幕宽度并计算比例functionfontSize(res){letdocEl=document.documentElement,clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;如果(!clientWidth)返回;让fontSize=100*(clientWidth/1920);returnres*fontSize;}需要设置字体的地方可以这样写,比如1920屏幕宽度下如果字体设置为12px,可以传入0.12给fontSizefontSize(0.12)tooltip:{trigger:'axis',axisPointer:{//轴指示器,轴触发validtype:'shadow'//默认为直线,可选:'line'|'阴影'},textStyle:{fontSize:fontSize(0.12),}},