在vue3setup语法糖中封装一个echarts方法传入宽高opitionid就可以生成图表需要typescript语法

以下是一个简单的示例代码，可以在Vue3中使用setup语法糖封装echarts方法：

import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  props: {
    width: {
      type: String,
      required: true,
    },
    height: {
      type: String,
      required: true,
    },
    option: {
      type: Object,
      required: true,
    },
    id: {
      type: String,
      required: true,
    },
  },

  setup(props) {
    const chartRef = ref<HTMLElement>();

    const chartInstance = ref<echarts.ECharts>();

    onMounted(() => {
      if (!chartRef.value) return;

      const chart = echarts.init(chartRef.value);

      chart.setOption(props.option);

      chartInstance.value = chart;
    });

    onUnmounted(() => {
      if (!chartInstance.value) return;

      chartInstance.value.dispose();
    });

    return {
      chartRef,
    };
  },

  render() {
    return <div style={{ width: this.width, height: this.height }} ref="chartRef"></div>;
  },
});

在这个示例代码中，我们：

• 导入Vue3的相关方法和echarts库。
• 定义一个组件，接收宽度、高度、echarts配置和图表ID作为props。
• 在setup函数中，创建一个chartRef引用和一个chartInstance引用。
• 在onMounted钩子函数中，获取chartRef引用，创建echarts实例，并设置配置。
• 在onUnmounted钩子函数中，销毁echarts实例。
• 最后，在组件的render方法中，将chartRef引用绑定到div元素上。

使用这个组件时，只需要传入宽度、高度、echarts配置和图表ID即可：

<template>
  <div>
    <echarts-chart width="600px" height="400px" :option="option" id="chart"></echarts-chart>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import EchartsChart from './EchartsChart.vue';

export default defineComponent({
  components: {
    EchartsChart,
  },

  data() {
    return {
      option: {
        // echarts配置
      },
    };
  },
});
</script>

这样就可以在Vue3中使用setup语法糖封装echarts方法了。