采用rem为单位,根据屏幕的宽度调整html的font-size。

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

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

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

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

当浏览器窗口发生改变的时候,需要重绘图表,才能实现实时改变echarts字体

window.addEventListener('resize',()=>{
	this.refreshChart();
})
// vue
setFontOption() {
	this.chart.setOption({
		tooltip : {
			textStyle:{
				fontSize: fontSize(12),
			}
		}
	})
},
refreshChart() {
    if (!this.chart) return;
    this.chart.resize();
	this.setFontOption();
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐