Vue.js 中带圆角的圆环图

问题描述

我在我的 vue 项目中使用 vue-chartjs，我需要圆角圆环图。圆弧的所有边都必须倒圆。（对不起，我不能写更多的描述）

我的代码：

Home.vue

<template>
  <div class="chart">
    <doughnut-chart></doughnut-chart>
</template>

<script>
import DoughnutChart from '@/components/DoughnutChart'
export default {
    name: "Home",components: {
        DoughnutChart
    }
}

DoughnutChart.vue

<script>
import { Doughnut } from "vue-chartjs";

export default {
    extends: Doughnut,data() {
        return {
            chartData: {
                labels: ["Foydalanuvchilar soni","Uzatilgan xabarlar soni"],datasets: [
                    {
                        borderWidth: 0,backgroundColor: ["rgba(25,188,239,1)","rgba(251,99,89,1)"],hoverBackgroundColor: ["rgba(25,0.8)",0.8)"],data: [25,75],},],options: {
                legend: {
                    display: false,responsive: true,maintainAspectRatio: false,cutoutPercentage: 90,borderAlign: 'inner',animation: {
                        animationRotate: true,duration: 2000
                },tooltips: {
                        enabled: false
                },};
    },mounted() {
        this.renderChart(this.chartData,this.options);
    },};
</script>

this is my chart

and I want to do like this

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue-chartjs vue.js