vue3 中echarts屏幕分辨率变化但是echarts字体不变化

在Vue3中，可以使用`window.addEventListener`监听屏幕分辨率的变化，然后通过`setOption`方法动态更新echarts的配置项，包括字体大小和其他样式。

下面是一个示例代码：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chart);

    // 初始化图表配置项
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          fontSize: 20, // 初始字体大小
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: 20, // 初始字体大小
        },
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      }],
    };
    this.chart.setOption(option);

    // 监听屏幕分辨率的变化
    window.addEventListener('resize', () => {
      // 动态更新图表配置项
      const newOption = {
        xAxis: {
          axisLabel: {
            fontSize: this.getFontSize(), // 根据屏幕分辨率计算字体大小
          },
        },
        yAxis: {
          axisLabel: {
            fontSize: this.getFontSize(), // 根据屏幕分辨率计算字体大小
          },
        },
      };
      this.chart.setOption(newOption);
    });
  },
  methods: {
    getFontSize() {
      // 根据屏幕分辨率计算字体大小
      const screenWidth = window.screen.width;
      if (screenWidth <= 768) {
        return 12;
      } else if (screenWidth <= 1024) {
        return 16;
      } else {
        return 20;
      }
    },
  },
};
</script>

在上面的代码中，我们使用`window.screen.width`获取屏幕宽度，然后根据不同的屏幕分辨率计算出字体大小，动态更新echarts的配置项。这样就可以实现屏幕分辨率变化时，echarts中的字体大小也会跟着变化。