echarts大屏字体自适应的方法步骤


Posted in Javascript onJuly 12, 2019

用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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
小程序实现搜索框
Jun 19 #Javascript
You might like
php中定时计划任务的实现原理
2013/01/08 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JS iFrame加载慢怎么解决
2016/05/13 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
python正则实现提取电话功能
2018/02/24 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
mac使用python识别图形验证码功能
2020/01/10 Python
2014年公司庆元旦活动方案
2014/03/05 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
大学推普周活动总结
2015/05/07 职场文书
公司的力量观后感
2015/06/05 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python天气语音播报小助手
2021/09/25 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android