echarts大屏字體自適應的方法步驟

這篇文章主要介紹了echarts大屏字體自適應的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧

用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),
      }
    },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。