使用vue3 和Chart.js 实现一个宽为400px 的 饼状图

可以按照以下步骤实现：

1. 安装Chart.js 和 vue3-chart-v2（vue3版本的Chart.js封装库）

npm install chart.js@3.5.1 vue3-chart-v2@0.2.2

2. 在Vue组件中引入Chart.js和vue3-chart-v2

<template>
  <div>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import { Pie } from 'vue3-chart-v2'

export default {
  name: 'PieChart',
  extends: Pie,
  mounted () {
    this.renderChart({
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [
        {
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A', '#9C27B0'],
          data: [10, 20, 30, 40, 50]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

3. 在mounted钩子函数中使用vue3-chart-v2中的Pie组件渲染饼状图，传入数据和配置项。

其中，extends: Pie 表示该组件继承自vue3-chart-v2中的Pie组件，这样就可以直接使用Pie组件中的方法和属性。

4. 在组件中使用该饼状图组件

<template>
  <div class="container">
    <pie-chart></pie-chart>
  </div>
</template>

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

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

这样就可以在容器中显示一个宽为400px的饼状图了。如果需要调整宽度，可以在组件的样式中设置宽度。

<template>
  <div class="container">
    <pie-chart class="chart"></pie-chart>
  </div>
</template>

<style scoped>
.container {
  width: 400px;
}

.chart {
  width: 100%;
}
</style>