Echarts配置项中的字体无法改变长度单位问题解决

问题

使用Echarts时，通常会在图表对应的配置中设置各个部分的字体，但是配置项中的字体只支持输入数字，其单位默认为px，若需要让字体使用百分比、vw、rem等单位实现自适应效果，则无法直接实现。

例如：

export const options = {
	xAxis: {
		axisLabel: {
			textStyle: {
				fontSize: 16 // 此处不支持输入 '2vw' 等
			}
		}
	}
}

解决方法

以vw单位为例，由于直接使用带单位的字符串无效，需要设计一个函数，通过计算，动态得出在当前页面大小时对应的字体大小，代码如下：

function translateFont(size: number): number {
	// 获得当前页面宽度大小
	let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if(!clientWidth) return;
	let fontSize = clientWidth / 2560; // 2560 为字体大小显示为 size 时的页面宽度
	return size * fontSize;
}

在设置字体的位置调用此函数即可。

注意
此方法存在一个问题，页面仅在初始化的时候会调用此方法，因此字体大小在页面初始化后就不会发生变化。若字体需要根据页面大小自适应，则需要监听页面尺寸变化，并更新对应 Echarts 的配置项，这里不再赘述。

原文地址

【个人博客】