用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), } },
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com