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中removeData()方法用法实例
Dec 27 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
javascript简易画板开发
Apr 12 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
详解JavaScript执行模型
Nov 16 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js DOM模型操作
2009/12/28 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
React简单介绍
2017/05/24 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue实现分页栏效果
2019/06/28 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python的历史与优缺点整理
2020/05/26 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
python中K-means算法基础知识点
2021/01/25 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
教师四风问题对照检查材料
2014/09/26 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电