如何增大Ant Charts中饼图分隔线的宽度？

我需要增大饼图中这些白色线条的宽度，尝试了多种方法但均无效。使用<Pie {...props} />组件，当前配置如下：

const Config = {
  height: 246.01,
  width: 150,
  data: data,
  angleField: 'value',
  colorField: 'type',
  color: colorArry,
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 11,
    lineDash: [4, 5],
    strokeOpacity: 12,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer',
  },
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '0',
    rotate: '0',
    autoRotate: false,
    content: data['type'],
    position: 'start',
    style: {
      fontSize: 16,
      textAlign: 'center',
      fontWeight: 500,
    },
  },
  interactions: [{ type: 'element-active' }],
  legend: { position: 'left-bottom' },
};

解决方案 #

你当前配置的style是针对饼图扇区的样式，白色分隔线属于饼图的分隔线专属配置，需要单独设置对应属性（以常见的G2Plot Pie组件为例）：

1. 通过pieStyle控制分隔线
   直接在配置中添加pieStyle，设置分隔线的宽度和颜色：

const Config = {
  // ... 保留原有所有配置
  pieStyle: {
    lineWidth: 4, // 调整为你需要的宽度值
    stroke: '#fff', // 确保分隔线颜色为白色
  },
};

2. 部分版本支持separator配置
   如果使用的组件版本支持，可直接配置separator属性：

const Config = {
  // ... 保留原有所有配置
  separator: {
    lineWidth: 4,
    stroke: '#fff',
  },
};

注意：检查你的style中stroke设置的是black，会覆盖扇区边缘颜色，确保分隔线的颜色与你需要的白色一致，同时调整lineWidth到合适数值。不同可视化库的Pie组件配置可能略有差异，可对照对应库的官方文档确认属性名称。

内容的提问来源于stack exchange，提问作者Nitin tiwari