针对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大屏字体自适应的核心实现逻辑，希望能为相关开发者提供实用参考。