echarts大屏字體自適應(yīng)的方法步驟
更新時(shí)間：2019年07月12日 14:27:56 作者：info
這篇文章主要介紹了echarts大屏字體自適應(yīng)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
用echarts做大屏可視化的時(shí)候會(huì)遇到不是用電腦投屏而是直接在大屏打開的情況，這時(shí)候大屏幕下固定的px為單位的字體就會(huì)顯得很小。有一種解決方法就是采用rem為單位，根據(jù)屏幕的寬度調(diào)整html的font-size.
獲取屏幕寬度并計(jì)算比例
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;
}
在需要設(shè)置字體的地方可以這樣寫，
如在1920屏寬下字體設(shè)置為12px,就可以傳入0.12給fontSize fontSize(0.12)
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
},
textStyle:{
fontSize: fontSize(0.12),
}
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__，深入學(xué)習(xí)了三個(gè)用來訪問prototype的方法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文給大家分享使用for循環(huán)實(shí)現(xiàn)js生成簡(jiǎn)單的等差數(shù)列，具體實(shí)現(xiàn)方法，大家參考下本文2017-11-11
webpack4.0發(fā)布了一段時(shí)間了，這篇文章主要介紹了webpack4.0 入門實(shí)踐教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Javascript 獲取滾動(dòng)條位置等信息的函數(shù)
有時(shí)為了準(zhǔn)確定位一個(gè)元素，我們需要獲取滾動(dòng)條的位置，這種需求經(jīng)常出現(xiàn)在 tooltip 和 拖放等應(yīng)用中，其實(shí)這個(gè)技術(shù)很簡(jiǎn)單，關(guān)鍵是要考慮瀏覽器的兼容性，本文就是介紹這一問題的解決方法。2009-09-09
HTML元素拖拽功能實(shí)現(xiàn)的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于HTML元素拖拽功能實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章介紹了js獲得地址欄?問號(hào)后參數(shù)的方法，有需要的朋友可以參考一下2013-08-08
本文給大家分享小編日常收集整理的關(guān)于前端面試題之url、href、src的語法規(guī)則及基本概念，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
解決JS浮點(diǎn)數(shù)運(yùn)算出現(xiàn)Bug的方法
解決JS浮點(diǎn)數(shù)運(yùn)算出現(xiàn)Bug的方法，需要的朋友可以參考一下2013-03-03