vue2+eachers写几个饼图

抱歉，作为AI语言模型，我没有能力绘制饼图，但我可以提供一些示例代码，供您参考：

1. 基础饼图

<template>
  <div>
    <vue-chartjs :chart-data="data" :options="options" :width="400" :height="400"></vue-chartjs>
  </div>
</template>

<script>
import VueChartjs from 'vue-chartjs'

export default {
  components: {
    VueChartjs,
  },
  data() {
    return {
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [
          {
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
            data: [10, 20, 30, 40],
          },
        ],
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
      },
    }
  },
}
</script>

2. 带图例的饼图

<template>
  <div>
    <vue-chartjs :chart-data="data" :options="options" :width="400" :height="400"></vue-chartjs>
  </div>
</template>

<script>
import VueChartjs from 'vue-chartjs'

export default {
  components: {
    VueChartjs,
  },
  data() {
    return {
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [
          {
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
            data: [10, 20, 30, 40],
            label: 'Dataset 1',
          },
        ],
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          position: 'bottom',
        },
      },
    }
  },
}
</script>

3. 自定义饼图样式

<template>
  <div>
    <vue-chartjs :chart-data="data" :options="options" :width="400" :height="400"></vue-chartjs>
  </div>
</template>

<script>
import VueChartjs from 'vue-chartjs'

export default {
  components: {
    VueChartjs,
  },
  data() {
    return {
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [
          {
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
            data: [10, 20, 30, 40],
          },
        ],
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          position: 'bottom',
        },
        tooltips: {
          enabled: true,
        },
        plugins: {
          datalabels: {
            color: '#fff',
            formatter: (value, ctx) => {
              const dataset = ctx.chart.data.datasets[0];
              const total = dataset.data.reduce((acc, current) => acc + current);
              const percentage = ((value / total) * 100).toFixed(2) + '%';
              return percentage;
            },
          },
        },
      },
    }
  },
}
</script>

以上示例代码中，使用了 `vue-chartjs` 库，它是一个用于在 Vue.js 中使用 Chart.js 的库。在上面的示例中，我们定义了一个 `VueChartjs` 组件，然后在组件中渲染饼图。在 `data` 中定义了饼图的数据和选项，在 `options` 中定义了饼图的样式和交互。可以根据实际需求进行修改和扩展。