如何为Vue Apex Charts环形图（Donut Chart）系列添加圆角

要让环形图的每个系列边缘呈现圆润效果，只需在plotOptions.pie配置中添加borderRadius属性，指定圆角半径即可。以下是修改后的完整代码：

<template>
  <div class="example">
    <apexchart
      :width="width"
      :height="height"
      :options="options"
      :series="data"
    ></apexchart>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Chart",
  props: {
    title: {
      type: String,
    },
    width: {
      type: Number,
    },
    height: {
      type: Number,
    },
    loading: {
      type: Boolean,
    },
  },
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      data: [30, 40, 45, 50, 49, 60],
    };
  },
  computed: {
    options() {
      return {
        chart: {
          type: "donut",
        },
        title: {
          text: this.title,
          align: "left",
          style: {
            fontSize: "30px",
            fontWeight: "bold",
          },
        },
        plotOptions: {
          pie: {
            // 设置扇形块的圆角半径
            borderRadius: 8,
            donut: {
              labels: {
                show: true,
                total: {
                  show: true,
                  label: "Total",
                  fontSize: "22px",
                  fontWeight: "bold",
                  color: "black",
                },
              },
            },
          },
        },
        colors: [
          "#0066a4",
          "#0096f0",
          "#80c5fd",
          "#e2e2e2",
          "#a9a9a9",
          "#393939",
        ],
        noData: {
          text: this.loading ? "Loading..." : "No Data",
        },
        labels: [
          "Restobar Digital",
          "Campus Digital",
          "Metrovision",
          "Billboard",
          "Street Column",
          "Bus Shelter",
        ],
      };
    },
  },
};
</script>

关键说明： #

• plotOptions.pie.borderRadius：控制每个扇形块的圆角大小，数值可根据需求调整（如8、10等），数值越大边缘圆润度越高。
• 若想优化视觉一致性，可搭配plotOptions.pie.expandOnClick: false关闭点击展开动画，避免圆角效果被动画干扰；也可调整donut.size参数适配圆角显示比例。

内容的提问来源于stack exchange，提问作者M.KH