echarts 图表文字大小自适应 字体大小自适应

将文字大小自适应方法挂载到全局

//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;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

页面中使用

//在需要自适应的地方使用  this.fontSize(16) 
xAxis: {
  type: "category",
  data: data,
  axisLine: {
    lineStyle: {
      color: "#d4d9e2"
    }
  },
  axisLabel: {
    color: "#333",
    interval: 0, //横轴信息全部显示
    rotate: 60, //倾斜显示
    textStyle: {
      fontSize: this.fontSize(16)
    },
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18