資訊專欄INFORMATION COLUMN
摘要：用做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的為單位的字體就會顯得很小。
用echarts做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的px為單位的字體就會顯得很小。有一種解決方法就是采用rem為單位，根據(jù)屏幕的寬度調(diào)整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;
}
在需要設(shè)置字體的地方可以這樣寫，
如在1920屏寬下字體設(shè)置為12px,就可以傳入0.12給fontSize fontSize(0.12)
tooltip : {
trigger: "axis",
axisPointer : { // 坐標軸指示器，坐標軸觸發(fā)有效
type : "shadow" // 默認為直線，可選為："line" | "shadow"
},
textStyle:{
fontSize: fontSize(0.12),
}
},
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114948.html
摘要：用做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的為單位的字體就會顯得很小。 用echarts做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的px為單位的字體就會顯得很小。有一種解決方法就是采用rem為單位，根據(jù)屏幕的寬度調(diào)整html的font-size. 獲取屏幕寬度并計算比例 function fontSiz...
摘要：可以解決這個問題。而一般一個頁面不可能只引用一個表格，當你引用多個的時候，有些地方需要注意。做圖標自適應的時候要注意，所有圖標只能放一個方法，否則后面的會覆蓋前面的 最近在做大屏可視化，頁面數(shù)據(jù)展示基本都是用百度的echarts,因為頁面要做自適應，所以當視窗變化的時候echarts也要變化。window.onresize 可以解決這個問題。而一般一個頁面不可能只引用一個表格，當你引用...
摘要：布局上面四個方法，各有優(yōu)缺點，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進行自適應，在rpx出現(xiàn)之前，web頁面的自適應布局已經(jīng)有了多種解決方案，為什么微信...
摘要：布局上面四個方法，各有優(yōu)缺點，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進行自適應，在rpx出現(xiàn)之前，web頁面的自適應布局已經(jīng)有了多種解決方案，為什么微信...
閱讀 2958·2023-04-26 01:52
閱讀 3484·2021-09-04 16:40
閱讀 3641·2021-08-31 09:41
閱讀 1782·2021-08-09 13:41
閱讀 578·2019-08-30 15:54
閱讀 2972·2019-08-30 11:22
閱讀 1626·2019-08-30 10:52
閱讀 958·2019-08-29 13:24
