charts自适应

大屏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
          },