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實現時間表動態(tài)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
跟我學習javascript的prototype,getPrototypeOf和__proto__
跟我學習javascript的prototype,getPrototypeOf和__proto__，深入學習了三個用來訪問prototype的方法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文給大家分享使用for循環(huán)實現js生成簡單的等差數列，具體實現方法，大家參考下本文2017-11-11
webpack4.0發(fā)布了一段時間了，這篇文章主要介紹了webpack4.0 入門實踐教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
有時為了準確定位一個元素，我們需要獲取滾動條的位置，這種需求經常出現在 tooltip 和 拖放等應用中，其實這個技術很簡單，關鍵是要考慮瀏覽器的兼容性，本文就是介紹這一問題的解決方法。2009-09-09
這篇文章主要給大家介紹了關于HTML元素拖拽功能實現的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章介紹了js獲得地址欄?問號后參數的方法，有需要的朋友可以參考一下2013-08-08
本文給大家分享小編日常收集整理的關于前端面試題之url、href、src的語法規(guī)則及基本概念，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
解決JS浮點數運算出現Bug的方法，需要的朋友可以參考一下2013-03-03