echarts大屏字體自適應(yīng)的方法步驟
更新時(shí)間：2019年07月12日 14:27:56 作者：info
這篇文章主要介紹了echarts大屏字體自適應(yīng)的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
用echarts做大屏可視化的時(shí)候會(huì)遇到不是用電腦投屏而是直接在大屏打開(kāi)的情況，這時(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è)置字體的地方可以這樣寫(xiě)，
如在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)C# String.format函數(shù)功能代碼
這篇文章主要介紹了javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能,相信大家可以用的到2013-11-11
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)五子棋小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)拇a詳解
在web中如想要獲取用戶(hù)計(jì)算機(jī)上的文件我們通常會(huì)用到的方法是通過(guò)一個(gè)表單元素<input type="file">操作用戶(hù)選擇的文件,本文小編給大家介紹了JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08
詳解WordPress開(kāi)發(fā)中g(shù)et_current_screen()函數(shù)的使用
這篇文章主要介紹了WordPress開(kāi)發(fā)中g(shù)et_current_screen()函數(shù)的使用,get_current_screen()通常在對(duì)象的實(shí)例化時(shí)使用,需要的朋友可以參考下2016-01-01
JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
基于JavaScript Array數(shù)組方法(新手必看篇)
下面小編就為大家?guī)?lái)一篇基于JavaScript Array數(shù)組方法(新手必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
DOM是Document Object Model文檔對(duì)象模型的縮寫(xiě)；使用JavaScript操作DOM進(jìn)行DHTML開(kāi)發(fā)2011-12-12
JavaScript數(shù)組隨機(jī)排列實(shí)現(xiàn)隨機(jī)洗牌功能
這篇文章主要介紹了JavaScript數(shù)組隨機(jī)排列實(shí)現(xiàn)隨機(jī)洗牌功能的方法,涉及javascript中基于list.sort方法實(shí)現(xiàn)數(shù)組隨機(jī)排列的技巧,可應(yīng)用于隨機(jī)洗牌,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript?原始包裝類(lèi)型匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05