vue3 echart 字体大写自适应

在Vue3中，要实现ECharts的字体大小自适应，可以通过修改ECharts的theme配置来实现。

首先，在Vue3项目中，可以在main.js或者相关组件中引入ECharts：

import * as echarts from 'echarts';
import 'echarts/theme/macarons'; // 导入macarons主题

Vue.prototype.$echarts = echarts;

然后，在需要使用ECharts的组件中，可以通过创建一个`chartOption`对象来设置ECharts的配置项，包括字体大小的自适应：

data() {
  return {
    chartOption: {
      textStyle: {
        fontSize: 14, // 初始字体大小
        fontStyle: 'normal',
        fontWeight: 'normal'
      },
      // 其他配置项...
    }
  }
},
mounted() {
  this.initChart();
},
methods: {
  initChart() {
    const chartEl = this.$refs.chart;

    // 创建ECharts实例
    const chart = this.$echarts.init(chartEl, 'macarons');

    // 动态计算字体大小
    const baseFontSize = Math.floor(chartEl.clientWidth / 512 * 14); // 512为ECharts容器的宽度，14为设定的参考字体大小
    this.chartOption.textStyle.fontSize = Math.min(baseFontSize, 20); // 限定最大字体大小为20

    // 设置ECharts配置项
    chart.setOption(this.chartOption);
  }
}

这样就可以实现ECharts字体大小的自适应。其中，通过获取ECharts容器的宽度来动态计算字体大小，保证在不同大小的容器中都可以自适应调整字体大小。同时，通过ECharts的theme配置，可以使用macarons等主题，使图表样式更加美观。