vue3封装echarts组件复用

你可以通过封装一个 Vue 组件来实现 ECharts 的复用。下面是一个简单的示例：

1. 首先，安装依赖：

npm install echarts vue-echarts

2. 创建一个名为 `Echarts.vue` 的组件文件，并在其中引入必要的模块：

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

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

export default {
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

3. 在需要使用 ECharts 的组件中，引入刚刚创建的 `Echarts.vue` 组件，并传入要显示的图表配置：

<template>
  <div>
    <echarts :option="chartOption" />
  </div>
</template>

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

export default {
  components: {
    Echarts
  },
  data() {
    return {
      chartOption: {
        // 这里填写你的 ECharts 配置
      }
    };
  }
};
</script>

现在，你可以在应用中复用 `Echarts` 组件，只需要传入不同的 `chartOption` 配置即可。这样就可以实现对 ECharts 的封装和复用了。