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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
Js经典案例的实例代码
May 10 Javascript
微信小程序实现刷脸登录
May 25 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
浅谈php扩展imagick
2014/06/02 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
javascript面向对象编程代码
2011/12/19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
会计毕业生自荐书
2014/06/12 职场文书
生活小常识广播稿
2014/09/16 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
运动会宣传语
2015/07/13 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript