vue实现扇形图统计

实现扇形图统计的方法

在Vue中实现扇形图统计，通常可以通过以下两种方式完成：使用原生Canvas绘制或借助第三方图表库（如ECharts或Chart.js）。以下是具体实现方法。

使用Canvas原生绘制扇形图

通过Canvas的arc方法可以绘制扇形，结合Vue的数据响应式特性动态更新图形。

<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.drawChart();
  },
  watch: {
    data: {
      handler() {
        this.drawChart();
      },
      deep: true,
    },
  },
  methods: {
    drawChart() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(centerX, centerY) * 0.8;
      let startAngle = 0;

      this.data.forEach((item) => {
        const sliceAngle = (2 * Math.PI * item.value) / 100;
        ctx.fillStyle = item.color;
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
        ctx.closePath();
        ctx.fill();
        startAngle += sliceAngle;
      });
    },
  },
};
</script>

数据格式示例：

data: [
  { value: 30, color: "#FF6384" },
  { value: 50, color: "#36A2EB" },
  { value: 20, color: "#FFCE56" },
]

使用ECharts实现扇形图

ECharts是功能强大的图表库，支持高度定制化的扇形图（饼图）。

1. 安装ECharts：

   npm install echarts

2. 在Vue组件中使用：

   

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

import * as echarts from "echarts";

export default { props: { data: { type: Array, required: true, }, }, mounted() { this.initChart(); }, watch: { data: { handler() { this.initChart(); }, deep: true, }, }, methods: { initChart() { const chartDom = this.$refs.chart; const chart = echarts.init(chartDom); const option = { series: [ { type: "pie", radius: "70%", data: this.data, label: { show: true, formatter: "{b}: {c} ({d}%)", }, }, ], }; chart.setOption(option); }, }, };

```

数据格式示例：

data: [
  { value: 30, name: "Category A" },
  { value: 50, name: "Category B" },
  { value: 20, name: "Category C" },
]

使用Chart.js实现扇形图

Chart.js轻量易用，适合快速实现扇形图（饼图）。

1. 安装Chart.js：

   

   npm install chart.js

2. 在Vue组件中使用：

   
   <template>
   <div>
    <canvas ref="chart" width="400" height="400"></canvas>
   </div>
   </template>

import { Chart, PieController, ArcElement, Tooltip, Legend } from "chart.js";

Chart.register(PieController, ArcElement, Tooltip, Legend);

export default { props: { data: { type: Array, required: true, }, }, mounted() { this.initChart(); }, watch: { data: { handler() { this.initChart(); }, deep: true, }, }, methods: { initChart() { const ctx = this.$refs.chart.getContext("2d"); new Chart(ctx, { type: "pie", data: { labels: this.data.map((item) => item.name), datasets: [ { data: this.data.map((item) => item.value), backgroundColor: this.data.map((item) => item.color), }, ], }, }); }, }, };

```

数据格式示例：

data: [
  { value: 30, name: "Category A", color: "#FF6384" },
  { value: 50, name: "Category B", color: "#36A2EB" },
  { value: 20, name: "Category C", color: "#FFCE56" },
]

注意事项

• 响应式更新：通过watch监听数据变化，动态更新图表。
• 性能优化：大数据量时，ECharts或Chart.js的性能优于原生Canvas。
• 交互功能：ECharts支持丰富的交互事件（如点击高亮），而Chart.js需手动扩展。