【知识分享】Echarts饼状图封装成组件

封装 Echarts 的饼状图组件也可以让你在 Vue 项目中更方便地使用饼状图。以下是封装 Echarts 饼状图组件的思路和示例代码：

（1）继续沿用之前安装的 Echarts 和 Vue-Echarts 插件。

（2）创建一个 PieChart.vue 组件用于封装饼状图：

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

<script>
import echarts from 'echarts';

export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart);
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: 'Pie Chart',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c} ({d}%)'
            },
            labelLine: {
              show: true
            },
            data: this.data
          }
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

（3）在父组件中调用 PieChart 组件并传入数据：

<template>
  <div>
    <pie-chart :data="chartData" />
  </div>
</template>

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

export default {
  components: {
    PieChart
  },
  data() {
    return {
      chartData: [
        { value: 335, name: 'Category A' },
        { value: 310, name: 'Category B' },
        { value: 234, name: 'Category C' },
        { value: 135, name: 'Category D' },
        { value: 1548, name: 'Category E' }
      ]
    };
  }
};
</script>
在这个示例中，我们封装了一个 PieChart 组件，同样接收一个名为 data 的 prop，用于传入饼状图的数据。在 PieChart 组件的 mounted 钩子中调用 renderChart 方法来渲染饼状图。父组件中通过引入 PieChart 组件并传入数据来展示饼状图。