我在afterDraw插件中创建了甜甜圈图表，并按照我想要的方式进行了所有计算和半径。我修改了chartjs中给出的reference的代码，以获得空数据。
在这里您可以根据您的要求更改半径，颜色。

<template>
  <Doughnut
    id="my-chart-id"
    :chartOptions="getChartOptions"
    :chartData="getChartData"
    :plugins="[defaultBackground]"
  />
</template>
<script>
import { Doughnut } from 'vue-chartjs';
import { Chart as ChartJS, ArcElement } from 'chart.js';

ChartJS.register(ArcElement);

export default {
  name: 'DoughnutChart',
  components: { Doughnut },
  props: ['chartData', 'options'],
  data() {
    return {
      defaultBackground: {
        id: 'custom_canvas_background_color',
        afterDraw: function(chart) {
          let totalData = chart.config.data.datasets[0].data.reduce(function(
            a,
            b
          ) {
            return a + b;
          },
          0);
          if (totalData === 0) {
            const {
              chartArea: { left, top, right, bottom },
              ctx
            } = chart;
            ctx.save(); // Save the current canvas state

            // Calculate the center of the chart
            const centerX = (left + right) / 2;
            const centerY = (top + bottom) / 2;

            // Calculate the radii of the inner and outer circles of the doughnut
            const outerRadius = Math.min(right - left, bottom - top) / 2;
            const innerRadius = outerRadius - 45; // Adjust this value as needed

            // Calculate the positions for the starting and ending points of the line
            const lineStartX = centerX;
            const lineStartY = centerY - outerRadius;
            const lineEndX = centerX;
            const lineEndY = centerY - innerRadius;

            // Draw the outer arc (grey doughnut ring)
            ctx.beginPath();
            ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(216, 216, 216, 1)';
            ctx.fill();

            // Draw the inner arc (to clear the inner circle)
            ctx.beginPath();
            ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 1)'; // Fill with white to clear the inner circle
            ctx.fill();

            // Draw the white line break from outer circle to inner circle
            ctx.beginPath();
            ctx.moveTo(lineStartX, lineStartY);
            ctx.lineTo(lineEndX, lineEndY);
            ctx.lineWidth = 2; // Adjust the line width as needed
            ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; // White color
            ctx.stroke();

            ctx.restore(); // Restore the canvas state
          }
        }
      }
    };
  },
  computed: {
    getChartData() {
      return this.chartData;
    },
    getChartOptions() {
      return this.options;
    }
  }
};
</script>

<style></style>