G2 多级饼图使用蜘蛛标签

项目中用到 G2 的多级饼图，想要做到二级饼图为蜘蛛标签。下面是解决方案。

实现效果

image.png

实现

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

const data = [
  { name: '狮子', type: '火象星座', value: 11 },
  { name: '白羊', type: '火象星座', value: 10 },
  { name: '射手', type: '火象星座', value: 10 },
  { name: '水瓶', type: '风向星座', value: 14 },
  { name: '双子', type: '风向星座', value: 7 },
  { name: '天秤', type: '风向星座', value: 7 },
  { name: '摩羯', type: '土象星座', value: 14 },
  { name: '金牛', type: '土象星座', value: 3 },
  { name: '处女', type: '土象星座', value: 3 },
  { name: '天蝎', type: '水象星座', value: 11 },
  { name: '巨蟹', type: '水象星座', value: 5 },
  { name: '双鱼', type: '水象星座', value: 5 },
];
const ds = new DataSet();
const dv = ds.createView();
dv.source(data).transform({
  type: 'percent',
  field: 'value',
  dimension: 'type',
  as: 'percent',
});

const colorMap = {
  火象星座: '#1890ff',
  风向星座: '#13c2c2',
  土象星座: '#ffc53d',
  水象星座: '#73d13d',
};

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(dv.rows);
chart.legend(false);
chart.coordinate('theta', {
  radius: 0.5,
  innerRadius: 0.3,
});
chart.tooltip({
  showMarkers: false
});
chart
  .interval()
  .adjust('stack')
  .position('percent')
  .color('type', (val) => colorMap[val])
  .style({
    stroke: 'white',
    lineWidth: 1,
  })
  .label('type', {
    offset: -5,
    style: {
      fill: 'white',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)',
    },
  });

const ds2 = new DataSet();
const dv2 = ds2.createView();
dv2.source(data).transform({
  type: 'percent',
  field: 'value',
  dimension: 'name',
  as: 'percent',
});
const outterView = chart.createView();
outterView.data(dv2.rows);
outterView.coordinate('theta', {
  innerRadius: 0.5 / 0.8,
  radius: 0.8,
});
outterView
  .interval()
  .adjust('stack')
  .position('percent')
  .color('type*name', (type, name) => colorMap[type])
  .style({
    stroke: 'white',
    lineWidth: 1,
  })
  .label('name', {
    layout: [{ type: 'pie-spider' }],
  });

chart.interaction('element-active')

chart.render();

关键点

核心就是外部界面 outterView 的 label 使用了 pie-spider 的布局。这个在 G2 的文档中始终没有找到，后来在翻找源码的时候在 G2\src\index.ts #111 找到的。

registerGeometryLabelLayout('overlap', overlap);
registerGeometryLabelLayout('distribute', distribute);
registerGeometryLabelLayout('fixed-overlap', fixedOverlap);
registerGeometryLabelLayout('hide-overlap', hideOverlap);
registerGeometryLabelLayout('limit-in-shape', limitInShape);
registerGeometryLabelLayout('limit-in-canvas', limitInCanvas);
registerGeometryLabelLayout('limit-in-plot', limitInPlot);
registerGeometryLabelLayout('pie-outer', pieOuterLabelLayout);
registerGeometryLabelLayout('adjust-color', adjustColor);
registerGeometryLabelLayout('interval-adjust-position', intervalAdjustPosition);
registerGeometryLabelLayout('interval-hide-overlap', intervalHideOverlap);
registerGeometryLabelLayout('point-adjust-position', pointAdjustPosition);
registerGeometryLabelLayout('pie-spider', pieSpiderLabelLayout);
registerGeometryLabelLayout('path-adjust-position', pathAdjustPosition);

最后

突然发现 G2 这种应用广泛的库，文档居然也很久没更新了。有时候找不到解决方案还是得多翻翻源码。