echarts大屏字體自適應

SoapEye 發布于2019-08-30 11:22 / 2957人閱讀

摘要：用做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的為單位的字體就會顯得很小。

用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),
            }
        },

GPU云服務器云服務器字體自適應自適應文本自適應文字自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114948.html

echarts大屏字體自適應

摘要：用做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的為單位的字體就會顯得很小。用echarts做大屏可視化的時候會遇到不是用電腦投屏而是直接在大屏打開的情況，這時候大屏幕下固定的px為單位的字體就會顯得很小。有一種解決方法就是采用rem為單位，根據屏幕的寬度調整html的font-size. 獲取屏幕寬度并計算比例 function fontSiz...

MartinDai 2019-08-23 18:38 評論0 收藏0
echarts 表格自適應需要注意的問題

摘要：可以解決這個問題。而一般一個頁面不可能只引用一個表格，當你引用多個的時候，有些地方需要注意。做圖標自適應的時候要注意，所有圖標只能放一個方法，否則后面的會覆蓋前面的最近在做大屏可視化，頁面數據展示基本都是用百度的echarts,因為頁面要做自適應，所以當視窗變化的時候echarts也要變化。window.onresize 可以解決這個問題。而一般一個頁面不可能只引用一個表格，當你引用...

fasss 2019-08-23 17:20 評論0 收藏0
微信小程序新單位rpx與自適應布局

摘要：布局上面四個方法，各有優缺點，現在回頭看看微信的，相信大家已經有所啟發，實際上就是系統級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據屏幕寬度進行自適應，在rpx出現之前，web頁面的自適應布局已經有了多種解決方案，為什么微信...

LeviDing 2019-08-29 11:27 評論0 收藏0
微信小程序新單位rpx與自適應布局

摘要：布局上面四個方法，各有優缺點，現在回頭看看微信的，相信大家已經有所啟發，實際上就是系統級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據屏幕寬度進行自適應，在rpx出現之前，web頁面的自適應布局已經有了多種解決方案，為什么微信...

thursday 2019-08-20 11:42 評論0 收藏0