echarts大屏字体自适应

9次阅读

共计 547 个字符,预计需要花费 2 分钟才能阅读完成。

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

获取屏幕宽度并计算比例

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)

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

正文完
 0