antv g2plot中的玫瑰图添加蜘蛛布局标签

在 antv G2Plot 中，可以通过设置 label 属性来添加蜘蛛布局标签。具体步骤如下：

在创建玫瑰图时，设置 coordinate 属性为 polar，并设置 isTransposed 为 true，使得玫瑰图变为蜘蛛布局。

const plot = new G2Plot.RosePlot({
  data,
  angleField: 'type',
  radiusField: 'value',
  coordinate: {
    type: 'polar',
    isTransposed: true,
  },
  ...
});

在 label 属性中设置 layout 为 spider，并设置 content 属性为标签文本值所对应的字段名。

const plot = new G2Plot.RosePlot({
  data,
  angleField: 'type',
  radiusField: 'value',
  coordinate: {
    type: 'polar',
    isTransposed: true,
  },
  label: {
    layout: {
      type: 'spider',
    },
    content: 'value',
    ...
  },
  ...
});

可以进一步设置 label 属性中的其他属性，如 style, offset, adjustColor 等，以符合具体需求。

完整代码示例：

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '分类六', value: 5 },
];

const plot = new G2Plot.RosePlot({
  data,
  angleField: 'type',
  radiusField: 'value',
  coordinate: {
    type: 'polar',
    isTransposed: true,
  },
  label: {
    layout: {
      type: 'spider',
    },
    content: 'value',
    style: {
      fontSize: 12,
      textAlign: 'center',
    },
    adjustColor: true,
  },
});

plot.render();