在vue3中封装一个echarts方法传入宽高opition就可以生成图表

可以通过以下步骤在Vue3中封装一个echarts方法：

安装echarts：

npm install echarts -S

在Vue3的组件中引入echarts：

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

export default {
  name: 'MyChart',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '400px',
    },
    option: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$el);
    this.chart.setOption(this.option);
  },
  beforeUnmount() {
    this.chart.dispose();
  },
};
</script>

<template>
  <div :style="{ width, height }"></div>
</template>

在父组件中使用该封装方法：

<template>
  <my-chart :width="'100%'" :height="'400px'" :option="option" />
</template>

<script>
import MyChart from '@/components/MyChart.vue';

export default {
  name: 'App',
  components: {
    MyChart,
  },
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
          },
        ],
      },
    };
  },
};
</script>

通过上述方式可以封装一个echarts方法，在父组件中传入相应的宽高和option，就可以生成对应的图表。