vue3 echarts 封装

Vue3+echarts封装是为了方便在Vue3项目中使用echarts图表库。下面是一个简单的封装示例：

首先，我们需要在Vue3项目中安装echarts库。可以使用npm或者yarn命令进行安装：

npm install echarts --save

或者

yarn add echarts

然后，在Vue3项目中新建一个ECharts组件，可以命名为ECharts.vue。在该组件中，我们可以使用echarts提供的API来初始化并渲染图表。

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

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

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

<style scoped>
</style>

在上述示例中，我们通过ref获取了chart容器的DOM元素，并通过echarts.init()方法进行初始化chart实例。然后，我们使用setOption()方法将传入的option配置应用到图表上。

接下来，我们可以在其他Vue组件中使用ECharts组件。假设我们有一个LineChart.vue组件，并引入了ECharts组件：

<template>
  <div>
    <e-charts :option="lineOption"></e-charts>
  </div>
</template>

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

export default {
  components: {
    ECharts
  },
  data() {
    return {
      lineOption: {
        // 这里是你的echarts配置项
      }
    }
  }
}
</script>

<style scoped>
</style>

通过上述封装，我们可以在Vue3项目中简化echarts的使用流程，并复用ECharts组件来呈现不同的图表类型。