echarts大屏字体自适应的方法步骤
更新时间：2019年07月12日 14:27:56 作者：info
这篇文章主要介绍了echarts大屏字体自适应的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用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),
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Bootstrap datepicker日期选择器插件使用详解
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家带来一篇详谈js遍历集合(Array,Map,Set)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家详细介绍了6行代码实现微信小程序页面返回顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
JavaScript的Array对象有一个sort方法，用于实现对数组元素的排序，该方法默认按照数组项ASCII 字符顺序升序排列。这篇文章重点给大家介绍js模拟实现Array的sort方法，一起看看吧2007-12-12
这篇文章主要介绍了JavaScript使用concat连接数组的方法,实例分析了javascript中concat函数操作数组的技巧,需要的朋友可以参考下2015-04-04
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了js实现鼠标移到链接文字弹出一个提示层的方法,涉及javascript鼠标事件与css样式的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了javascript禁用Tab键的脚本实例，很实用，大家参考使用吧2013-11-11
本文主要对JavaScript中String对象的方法进行介绍。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了JS ES6变量的解构赋值，对ES6感兴趣的同学，可以参考下2021-05-05
最新评论