vue3使用echarts 封装

Vue 3 使用 ECharts 封装，通常指的是在 Vue 3 项目中，将 ECharts 图表库进行组件化封装，以便在模板中通过更简单的方式使用 ECharts。以下是封装 ECharts 组件的一般步骤：

1. 安装 ECharts：首先需要确保项目中已经安装了 ECharts 库。

   npm install echarts --save

2. 创建 ECharts 组件：在 Vue 3 项目中创建一个新的 Vue 组件，这个组件内部将包含 ECharts 实例的创建和配置。

3. 引入 ECharts：在新创建的组件中引入 ECharts，并准备一个 DOM 容器用于挂载图表。

4. 创建图表实例：在组件的 `mounted` 钩子中创建 ECharts 实例，并将该实例挂载到步骤3中准备好的容器上。

5. 接收配置：组件需要接收外部传入的图表配置，这些配置通过 props 或者插槽的方式传入，并用于配置 ECharts 实例。

6. 更新和销毁：根据需要实现图表的更新和销毁逻辑，确保组件的生命周期内图表实例能正确响应数据变化或被清理。

下面是一个简单的 ECharts Vue 3 组件封装示例：

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'EChartComponent',
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    options: {
      deep: true,
      handler() {
        if (this.chart) {
          this.chart.setOption(this.options);
        }
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.chart.setOption(this.options);
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    resizeChart() {
      this.chart.resize();
    }
  }
};
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>

使用该组件时，只需要在 Vue 3 的模板中引入并传入相应的配置项即可：

<template>
  <div>
    <EChartComponent :options="chartOptions" />
  </div>
</template>

<script>
import EChartComponent from './EChartComponent.vue';

export default {
  components: {
    EChartComponent
  },
  data() {
    return {
      chartOptions: {
        // ECharts 图表配置
      }
    };
  }
};
</script>