当前位置：首页 > VUE

vue实现pie

2026-02-10 03:15:11VUE

Vue 实现饼图

在 Vue 中实现饼图可以通过多种方式完成，以下是两种常见的方法：使用第三方图表库（如 ECharts 或 Chart.js）或直接使用 SVG 绘制。

使用 ECharts 实现饼图

ECharts 是一个功能强大的图表库，支持多种图表类型，包括饼图。以下是实现步骤：

安装 ECharts 依赖：

npm install echarts --save

在 Vue 组件中引入并使用 ECharts：

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

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

export default {
  mounted() {
    this.initPieChart();
  },
  methods: {
    initPieChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '饼图示例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

使用 Chart.js 实现饼图

Chart.js 是另一个流行的图表库，使用起来更加轻量级。

安装 Chart.js 依赖：

npm install chart.js --save

在 Vue 组件中引入并使用 Chart.js：

<template>
  <canvas ref="pieChart"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  mounted() {
    this.initPieChart();
  },
  methods: {
    initPieChart() {
      const ctx = this.$refs.pieChart.getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
          datasets: [{
            label: 'My First Dataset',
            data: [300, 50, 100, 40, 120],
            backgroundColor: [
              'rgb(255, 99, 132)',
              'rgb(54, 162, 235)',
              'rgb(255, 205, 86)',
              'rgb(75, 192, 192)',
              'rgb(153, 102, 255)'
            ],
            hoverOffset: 4
          }]
        }
      });
    }
  }
};
</script>

使用 SVG 手动绘制饼图

如果需要更灵活的定制，可以直接使用 SVG 绘制饼图。以下是一个简单的实现示例：

vue实现pie

<template>
  <svg width="400" height="400" viewBox="0 0 400 400">
    <path
      v-for="(item, index) in pieData"
      :key="index"
      :d="getPath(item)"
      :fill="item.color"
      stroke="white"
      stroke-width="2"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      pieData: [
        { value: 30, color: '#FF6384' },
        { value: 50, color: '#36A2EB' },
        { value: 20, color: '#FFCE56' }
      ]
    };
  },
  computed: {
    total() {
      return this.pieData.reduce((sum, item) => sum + item.value, 0);
    }
  },
  methods: {
    getPath(item) {
      const radius = 150;
      const centerX = 200;
      const centerY = 200;
      const angle = (item.value / this.total) * 360;
      const startAngle = this.pieData
        .slice(0, this.pieData.indexOf(item))
        .reduce((sum, item) => sum + (item.value / this.total) * 360, 0);
      const endAngle = startAngle + angle;

      const startRad = (startAngle * Math.PI) / 180;
      const endRad = (endAngle * Math.PI) / 180;
      const x1 = centerX + radius * Math.cos(startRad);
      const y1 = centerY + radius * Math.sin(startRad);
      const x2 = centerX + radius * Math.cos(endRad);
      const y2 = centerY + radius * Math.sin(endRad);

      const largeArcFlag = angle > 180 ? 1 : 0;

      return `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
    }
  }
};
</script>