echarts大屏字体自适应的方法步骤
2019-07-12 14:27
1596 查看
用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), } },
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Python3学习之使用Print输出带颜色字体方法步骤详解
- Android编程实现自动调整TextView字体大小以适应文字长度的方法
- Android手机上浏览网页不可缩放,适应屏幕。iPhone手机显示网页,字体等变小了,解决方法
- UIWebView添加图片点击事件、调整字体大小与高度自适应的解决方法
- eclipse Indigo字体太小或不适应的修改回Courier New的方法
- vue中echarts3.0自适应的方法
- Android自定义PreferenceCategory的title颜色、字体大小写的方法
- 关于数据迁移的方法、步骤和心得
- 神经网络处理分类问题的方法与步骤
- win7安装打印服务器的图文方法步骤
- 阿里云优惠券(代金券)的领取方法和步骤
- windows与mac安装mongodb数据库的方法步骤与注意事项
- 在java代码中设置字体颜色方法总结
- 托盘程序的主要步骤及解决方法
- android TextView的字体颜色设置的多种方法
- PowerShell 远程执行任务的方法步骤
- ASP.NET网页显示LED字体的方法
- 模板方法模式(Template Method)-定义一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。
- 左右两列定宽,中间自适应的方法
- Win7字体模糊不清晰的最佳解决方法个人总结相当实用