大屏echarts自适应文字大小

1.在utils中创建 setFontSize.js

function setFontSize(val) {
const baseSize = 50;
let scale = document.documentElement.clientHeight / 2160; //根据最终的高度做出适应 高度2160--4320进行适配
let nowSize = baseSize * Math.min(scale, 2); //返回值函数内部最小的值
return val * nowSize;
}

export default {
setFontSize
}

2.main.js 中引入并添加到原型上

import publicFun from "@/utils/setFontSize";
Vue.prototype.$common = setFontSize

3.使用

//把实际的px除以100
textStyle: {
fontSize: this.$common.setFontSize(0.69),
},

5.示例

drawChart() {
let myChart = echarts.init(this.$refs.myChart);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
fontSize: this.$common.setFontSize(0.69),
},
},
grid: {
left: "2%",
right: "4%",
bottom: "0%",
top: "16%",
containLabel: true,
},
legend: {
show: true,
data: ["工单数", "完成量"],
right: 10,
top: 12,
textStyle: {
color: "#fff",
fontSize: this.$common.setFontSize(0.69),
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.3)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.3)",
},
},
axisLabel: {
color: "#fff",
fontSize: this.$common.setFontSize(0.69),
},
data: [
"环境脏乱",
"乱建",
"乱挖",
"乱经营",
"乱养",
"事故",
"治安",
"其他",
],
},

    yAxis: {  
      type: "value",  
      axisLine: {  
        show: false,  
        lineStyle: {  
          color: "white",  
        },  
      },  
      splitLine: {  
        show: false,  
        lineStyle: {  
          color: "rgba(255,255,255,0.2)",  
        },  
      },  
      axisLabel: {  
        color: "#fff",  
        fontSize: this.$common.setFontSize(0.69),  
      },  
    },  
    series: \[  
      {  
        name: "工单数",  
        type: "bar",  
        barWidth: "15%",  
        itemStyle: {  
          normal: {  
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, \[  
              {  
                offset: 0,  
                color: "#8bd46e",  
              },  
              {  
                offset: 1,  
                color: "#09bcb7",  
              },  
            \]),  
            barBorderRadius: 11,  
          },  
        },  
        data: \[400, 500, 500, 500, 500, 400, 400, 500, 500\],  
      },  
      {  
        name: "完成量",  
        type: "bar",  
        barWidth: "15%",  
        itemStyle: {  
          normal: {  
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, \[  
              {  
                offset: 0,  
                color: "#fccb05",  
              },  
              {  
                offset: 1,  
                color: "#f5804d",  
              },  
            \]),  
            barBorderRadius: 12,  
          },  
        },  
        data: \[400, 400, 300, 300, 300, 400, 400, 400, 300\],  
      },  
    \],  
  };  
  option && myChart.setOption(option);  
},

　解决坐x,y标轴label 不生效

　　通过添加 rich 属性

axisLabel: {
color: "#fff",
fontSize: this.$common.setFontSize(0.69),
padding:[0,0,0,20],
rich:{}//添加这一行保证padding
},