脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts大屏字体自适应

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模拟实现C# String.format函数功能代码

    javascript模拟实现C# String.format函数功能代码

    这篇文章主要介绍了javascript模拟实现C# String.format函数功能,相信大家可以用的到
    2013-11-11
  • JavaScript实现网页五子棋小游戏

    JavaScript实现网页五子棋小游戏

    这篇文章主要为大家详细介绍了JavaScript实现网页五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JS获取本地文件并进行网络传输的代码详解

    JS获取本地文件并进行网络传输的代码详解

    在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件,本文小编给大家介绍了JS获取本地文件并进行网络传输的方法,需要的朋友可以参考下
    2024-08-08
  • 详解WordPress开发中get_current_screen()函数的使用

    详解WordPress开发中get_current_screen()函数的使用

    这篇文章主要介绍了WordPress开发中get_current_screen()函数的使用,get_current_screen()通常在对象的实例化时使用,需要的朋友可以参考下
    2016-01-01
  • JavaScript实现给数字添加千位分隔符

    JavaScript实现给数字添加千位分隔符

    这篇文章主要为大家详细介绍了JavaScript如何实现给数字添加千位分隔符,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • bootstrap监听滚动实现头部跟随滚动

    bootstrap监听滚动实现头部跟随滚动

    这篇文章主要为大家详细介绍了bootstrap监听滚动实现头部跟随滚动,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 基于JavaScript Array数组方法(新手必看篇)

    基于JavaScript Array数组方法(新手必看篇)

    下面小编就为大家带来一篇基于JavaScript Array数组方法(新手必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js DOM的学习笔记

    js DOM的学习笔记

    DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发
    2011-12-12
  • JavaScript数组随机排列实现随机洗牌功能

    JavaScript数组随机排列实现随机洗牌功能

    这篇文章主要介绍了JavaScript数组随机排列实现随机洗牌功能的方法,涉及javascript中基于list.sort方法实现数组随机排列的技巧,可应用于随机洗牌,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript 原始包装类型汇总

    JavaScript 原始包装类型汇总

    这篇文章主要介绍了JavaScript 原始包装类型汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-05-05

最新评论