vue echarts封装

Vue Echarts封装是指在Vue项目中使用Echarts图表库的过程中，对Echarts进行封装，以便更方便地使用和管理图表组件。在Vue中封装Echarts的方法如下：

1. 首先，在Vue项目中安装Echarts库。可以通过npm安装：

npm install echarts --save

2. 创建一个自定义的Echarts组件（例如Chart.vue），并引入Echarts库：

import echarts from 'echarts';

export default {
  name: 'Chart',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      // 在这里使用this.option来配置Echarts图表
      let chart = echarts.init(this.$el);
      chart.setOption(this.option);
    }
  },
  destroyed() {
    echarts.dispose(this.$el);
  }
}

3. 在父组件中使用新创建的Echarts组件：

<template>
  <div>
    <chart :option="earningOption" />
  </div>
</template>

<script>
import Chart from "../echarts/chart.vue";

export default {
  components: {
    Chart,
  },
  data() {
    return {
      earningOption: {
        // 在这里放置Echarts的配置项
      },
    };
  },
}
</script>

通过以上步骤，我们可以在Vue中封装Echarts图表，并且可以通过传递配置项来渲染图表。