国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

echarts大屏字體自適應(yīng)

MartinDai / 2246人閱讀

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105580.html

相關(guān)文章

  • echarts大屏字體自適應(yīng)

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

    SoapEye 評(píng)論0 收藏0

  • echarts 表格自適應(yīng)需要注意的問題

    摘要：可以解決這個(gè)問題。而一般一個(gè)頁(yè)面不可能只引用一個(gè)表格，當(dāng)你引用多個(gè)的時(shí)候，有些地方需要注意。做圖標(biāo)自適應(yīng)的時(shí)候要注意，所有圖標(biāo)只能放一個(gè)方法，否則后面的會(huì)覆蓋前面的 最近在做大屏可視化，頁(yè)面數(shù)據(jù)展示基本都是用百度的echarts,因?yàn)轫?yè)面要做自適應(yīng)，所以當(dāng)視窗變化的時(shí)候echarts也要變化。window.onresize 可以解決這個(gè)問題。而一般一個(gè)頁(yè)面不可能只引用一個(gè)表格，當(dāng)你引用...

    fasss 評(píng)論0 收藏0

  • 微信小程序新單位rpx與自適應(yīng)布局

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

    LeviDing 評(píng)論0 收藏0

  • 微信小程序新單位rpx與自適應(yīng)布局

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

    thursday 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<