ECharts大屏字体自适应方案:基于rem与动态计算

作者:阿沐时间:2026-10-23 09:37:40浏览:495

针对ECharts在大屏直接展示时固定px字体过小的问题,本文介绍通过rem单位结合屏幕宽度动态计算font-size的解决方案。核心逻辑是根据当前屏幕宽度与基准宽度(如1920px)的比例,实时调整根字体大小,从而确保图表内文字在不同分辨率下保持清晰可读。

ECharts大屏字体自适应方案:基于rem与动态计算

在使用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;

}

配置项中的字体应用

在ECharts配置项中需要定义字体的位置,可以调用封装好的字体大小计算函数。

基准宽度与参数映射示例

例如,当基准屏幕宽度设定为1920px,且期望字体大小为12px时,只需向计算函数传入0.12作为参数,即fontSize(0.12),即可得到适配后的实际像素值。


tooltip : {
      trigger: 'axis',
      axisPointer : {      // 坐标轴指示器,坐标轴触发有效
        type : 'shadow'    // 默认为直线,可选为:'line' | 'shadow'
      },
      textStyle:{
        fontSize: fontSize(0.12),
      }
    },

以上即为ECharts大屏字体自适应的核心实现逻辑,希望能为相关开发者提供实用参考。

作者最新文章