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

更新時間：2019年07月12日 14:27:56 作者：info

這篇文章主要介紹了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 : {      // 坐標軸指示器，坐標軸觸發(fā)有效
        type : 'shadow'    // 默認為直線，可選為：'line' | 'shadow'
      },
      textStyle:{
        fontSize: fontSize(0.12),
      }
    },

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

您可能感興趣的文章:

javascript模擬實現C# String.format函數功能代碼
這篇文章主要介紹了javascript模擬實現C# String.format函數功能,相信大家可以用的到
2013-11-11
JavaScript實現網頁五子棋小游戲
這篇文章主要為大家詳細介紹了JavaScript實現網頁五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JS獲取本地文件并進行網絡傳輸的代碼詳解
在web中如想要獲取用戶計算機上的文件我們通常會用到的方法是通過一個表單元素<input type="file">操作用戶選擇的文件,本文小編給大家介紹了JS獲取本地文件并進行網絡傳輸的方法,需要的朋友可以參考下
2024-08-08
詳解WordPress開發(fā)中get_current_screen()函數的使用
這篇文章主要介紹了WordPress開發(fā)中get_current_screen()函數的使用,get_current_screen()通常在對象的實例化時使用,需要的朋友可以參考下
2016-01-01
JavaScript實現給數字添加千位分隔符
這篇文章主要為大家詳細介紹了JavaScript如何實現給數字添加千位分隔符,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-11-11
bootstrap監(jiān)聽滾動實現頭部跟隨滾動
這篇文章主要為大家詳細介紹了bootstrap監(jiān)聽滾動實現頭部跟隨滾動,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
基于JavaScript Array數組方法(新手必看篇)
下面小編就為大家?guī)硪黄贘avaScript Array數組方法(新手必看篇)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
js DOM的學習筆記
DOM是Document Object Model文檔對象模型的縮寫；使用JavaScript操作DOM進行DHTML開發(fā)
2011-12-12
JavaScript數組隨機排列實現隨機洗牌功能
這篇文章主要介紹了JavaScript數組隨機排列實現隨機洗牌功能的方法,涉及javascript中基于list.sort方法實現數組隨機排列的技巧,可應用于隨機洗牌,非常具有實用價值,需要的朋友可以參考下
2015-03-03
JavaScript?原始包裝類型匯總
這篇文章主要介紹了JavaScript?原始包裝類型匯總，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05