Apex Charts 圆环图 - 图中系列项之间的填充

如何解决Apex Charts 圆环图 - 图中系列项之间的填充

我正在尝试在类似于下图（右）的顶点图表中创建一个圆环图，我已经非常接近了，但是我需要沿着圆环图的图在系列项周围进行一些描边或填充如图所示。

当前配置

 const options = {
    chart: {
      type: 'donut',height: 150,width: '100%',offsetX: 50
    },plotOptions: {
      pie: {
        startAngle: 10,donut: {
          size: '90%',dataLabels: {
            enabled: false
          },labels: {
            show: true,name: {
              show: true,offsetY: 38,formatter: () => 'Completed'
            },value: {
              show: true,fontSize: '48px',fontFamily: 'Open Sans',fontWeight: 500,color: '#ffffff',offsetY: -10
            },total: {
              show: true,showAlways: true,color: '#BCC1C8',fontWeight: 600,formatter: (w) => {
                const total = w.globals.seriesTotals.reduce(
                  (a,b) => a + b,0
                );
                return `${total}%`;
              }
            }
          }
        }
      },},dataLabels: {
      enabled: false
    },labels: ['Completed','Cancelled','Pending','Failed'],legend: {
      show: false,position: 'right',offsetX: -30,offsetY: 70,formatter: (value,opts) => {
        return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
      },markers: {
        onClick: undefined,offsetX: 0,offsetY: 25
      }
    },fill: {
      type: 'solid',colors: ['#8BD742','#BCC1C8','#78AEFF','#F74D52']
    },stroke: {
      width: 0
    },'#F74D52']
  };

解决方法

尝试将笔触宽度设置为大于 0，并为笔触设置与背景相同的颜色。

stroke: {
  width: 4,colors: ['#1E252A']
}