echarts大屏字体自适应

用echarts作大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的状况,这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size.html

获取屏幕宽度并计算比例
function fontSize(res){
    let docEl = document.documentElement,
        clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    return res*fontSize;

}

在须要设置字体的地方能够这样写,
如在1920屏宽下字体设置为12px,就能够传入0.12给fontSize fontSize(0.12)echarts

tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            },
            textStyle:{
                fontSize: fontSize(0.12),
            }
        },
相关文章
相关标签/搜索