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),
            }
        },
相關文章
相關標籤/搜索