Vue3+vue-chart-3实现Chart.js圆角Doughnut环形图问题咨询

云上老周

2026-9-23

解决方案

问题原因

你当前的配置仅为单个数据段的末端设置了圆角，Chart.js 默认只会按配置数组的索引对应每个弧段的样式，且未显式声明起始端圆角时不会生效。该细粒度圆角配置需要 Chart.js ≥3.3.0 版本支持。

修改步骤

1. 调整父组件配置

将borderRadius改为和数据段数量匹配的数组，每个段同时配置起始端、结束端的内外圆角，可选添加弧段间距避免圆角重叠：

/* In parents */
// template
<DoughnutChart class="simulator__doughnut" :chartData="datacollection" :chartOptions="chartOptions"/>
// computed
datacollection() {
    return {
        datasets: [
            {
                data: [this.monthlyPayment, this.monthlyRate],
                backgroundColor: ["#ff0058", "#ff645a"],
                borderWidth: 0,
                // 按数据段顺序配置每个弧的圆角
                borderRadius: [
                    // 第一个数据段：两端都加圆角
                    { innerStart: 50, outerStart: 50, innerEnd: 50, outerEnd: 50 },
                    // 第二个数据段：两端都加圆角
                    { innerStart: 50, outerStart: 50, innerEnd: 50, outerEnd: 50 }
                ],
                // 可选：设置弧段之间的间距，避免圆角重叠
                borderSpacing: 10
            },
        ],
    };
},
// 可选：配置环形宽度
chartOptions() {
    return {
        cutout: '70%', // 调整数值可修改环形的粗细
        responsive: true
    }
}