将文字大小自适应方法挂载到全局
//main.js
Vue.prototype.fontSize = function(res) {// 获取视口宽度const clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return; // 如果获取不到视口宽度,则退出函数// 计算基准字体大小let fontSize = clientWidth / 1920;// 返回根据视口宽度计算出的相对字体大小return res * fontSize;
};
页面中使用
//在需要自适应的地方使用 this.fontSize(16)
xAxis: {type: "category",data: data,axisLine: {lineStyle: {color: "#d4d9e2"}},axisLabel: {color: "#333",interval: 0, //横轴信息全部显示rotate: 60, //倾斜显示textStyle: {fontSize: this.fontSize(16)},}
},