1. 安装 ECharts

首先，需要安装 ECharts 库：

npm install echarts --save

2.在 Vue 组件中引入 ECharts

接下来，创建一个Vue组件用于绘制扇形统计图。假设我们创建一个组件PieChart.vue。

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

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

export default {
  name: 'PieChart',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化 ECharts 实例
      const chart = echarts.init(this.$refs.pieChart);

      // 设置图表的配置项和数据
      const option = {
        title: {
          text: '扇形统计图示例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '数据名称',
            type: 'pie',
            radius: '50%',
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用配置项生成图表
      chart.setOption(option);
    }
  },
  watch: {
    // 当传入的数据变化时，重新渲染图表
    data() {
      this.initChart();
    }
  }
};
</script>

<style scoped>
/* 可以根据需要自定义样式 */
</style>

3. 使用组件并传入数据

在你的页面组件中，可以直接使用并传入需要的扇形统计数据。

<template>
  <div>
    <PieChart :data="chartData" />
  </div>
</template>

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

export default {
  components: { PieChart },
  data() {
    return {
      chartData: [
        { value: 1048, name: '数据A' },
        { value: 735, name: '数据B' },
        { value: 580, name: '数据C' },
        { value: 484, name: '数据D' },
        { value: 300, name: '数据E' }
      ]
    };
  }
};
</script>

4. 可选项：动态更新数据

可以通过chartData中的数据变化来实时更新扇形统计图。组件会自动重新渲染图表。

上述代码演示了如何在Vue项目中通过ECharts库绘制一个基本的扇形统计图。ECharts的option对象可以进一步定制，包括设置颜色、图例、动画效果等，以满足不同的需求。