Vue中如何将echarts封装成组件使用

本文介绍: 这样，我们就可以在 Vue 中使用 Echarts 图表了。当父组件渲染时，会传递配置项到子组件中，然后子组件会创建一个 Echarts 实例并渲染图表。首先，在 Vue 项目中安装 Echarts 库。

npm install echarts --save

在 Vue 的main.js中引入 Echarts：

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

创建一个 Vue 组件，为了方便起见，我们可以把 Echarts 的图表和配置项作为组件的 props：

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

<script>
export default {
  name: "Chart",
  data() {
    return {
      chart: null,
    };
  },
  props: {
    // 传配置项option
    option: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    option() {
      if (this.chart) {
          this.chart.setOption(this.option); // 设置对应配置项
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs.chart); // 初始化echarts
    this.chart.setOption(this.option); // 设置对应配置项
    // 当窗口大小改变 echarts重置大小
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
};
</script>

在父组件中使用新创建的 Echarts 组件，直接写在方法里：

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

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

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