vue封装echarts组件复用

可以使用Vue来封装Echarts组件，以实现组件的复用。以下是一个简单的示例：

首先，安装Echarts插件：

npm install echarts --save

然后，创建一个Echarts组件，例如`Echarts.vue`：

<template>
  <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script>
import echarts from 'echarts';

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

<style scoped>
/* 样式 */
</style>

在需要使用Echarts的地方，引入并使用`Echarts`组件：

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

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

export default {
  components: {
    Echarts
  },
  data() {
    return {
      chartOption: {
        // Echarts配置项
      }
    };
  }
};
</script>

<style scoped>
/* 样式 */
</style>

这样，你就可以在不同的页面或组件中复用`Echarts`组件了。只需要在对应的页面或组件中定义不同的`chartOption`即可。

希望对你有所帮助！如有其他问题，请继续提问。