echarts大屏字体自适应

SoapEye 发布于2019-08-30 11:22 / 2909人阅读

摘要：用做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况，这时候大屏幕下固定的为单位的字体就会显得很小。

用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云服务器字体自适应自适应文本自适应文字自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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