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),
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现时间表动态效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
跟我学习javascript的prototype,getPrototypeOf和__proto__
跟我学习javascript的prototype,getPrototypeOf和__proto__，深入学习了三个用来访问prototype的方法，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要为大家介绍了web如何改变主题配色方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本文给大家分享使用for循环实现js生成简单的等差数列，具体实现方法，大家参考下本文2017-11-11
webpack4.0发布了一段时间了，这篇文章主要介绍了webpack4.0 入门实践教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
有时为了准确定位一个元素，我们需要获取滚动条的位置，这种需求经常出现在 tooltip 和 拖放等应用中，其实这个技术很简单，关键是要考虑浏览器的兼容性，本文就是介绍这一问题的解决方法。2009-09-09
这篇文章主要给大家介绍了关于HTML元素拖拽功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章介绍了js获得地址栏?问号后参数的方法，有需要的朋友可以参考一下2013-08-08
本文给大家分享小编日常收集整理的关于前端面试题之url、href、src的语法规则及基本概念，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
解决JS浮点数运算出现Bug的方法，需要的朋友可以参考一下2013-03-03
最新评论