echarts 字体大小根据页面自适应(使用rem)

2,026 阅读1分钟
采用rem为单位,根据屏幕的宽度调整html的font-size。

1、获取屏幕宽度并计算比例:

 fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	if (!clientWidth) return;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
}

2、在需要设置字体的地方可以这样写,如在1920屏宽下字体设置为12px,就可以传入12给fontSize

  tooltip:{
   trigger: 'axis',
   textStyle:{
   fontSize: this.fontSize(12),
  } 
 },

3、监听浏览器变化

    this.projChart.setOption(option);
     window.addEventListener("resize", () => {
     this.projChart.resize();
   });