vue2饼图完整代码

在Vue2中实现一个饼图，你可以使用ECharts这样的数据可视化库。以下是一个简单的Vue2组件示例，它使用ECharts来显示一个饼图。

首先，你需要安装ECharts：

npm install echarts --save

然后，你可以创建一个名为 `PieChart.vue` 的Vue组件，使用ECharts绘制饼图：

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

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

export default {
  name: 'PieChart',
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.pieChart);

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '饼图示例',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option);
    },
  },
};
</script>

这段代码创建了一个Vue组件，其中包含了一个ECharts饼图。你需要在父组件中使用这个 `PieChart` 组件，并确保父组件具有正确的样式或布局。

<template>
  <div>
    <pie-chart></pie-chart>
  </div>
</template>

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

export default {
  components: {
    PieChart,
  }
};
</script>

<style>
/* 在这里添加一些样式来控制布局等 */
</style>

确保在父组件中有足够的空间来放置饼图，或者你可以调整 `ref="pieChart"` 中的样式来改变饼图的大小。