fix(issue-3160): 修复饼图使用连续型图例，标签无法展示 (#3366)

* fix(issue-3160): 修复饼图使用连续型图例，标签无法展示

color 字段为 linear 类型时，不会存入 groupScales，导致获取 label-id 不唯一

closed: #3160

* fix(spider): 修复 get 获取属性值，会对 dot 进行解析

* test: 补充 bugs 单测

* fix: 修改 cr 建议，不需要重新生成

Author: visiky

src/geometry/base.ts

@@ -1188,7 +1188,11 @@ export default class Geometry extends Base {
       id = `${xVal}-${yVal}`;
     }
 
-    const groupScales = this.groupScales;
+    let groupScales = this.groupScales;
+    if (isEmpty(groupScales)) {
+      groupScales = get(this.getAttribute('color'), 'scales', []);
+    }
+
     for (let index = 0, length = groupScales.length; index < length; index++) {
       const groupScale = groupScales[index];
       const field = groupScale.field;

src/geometry/label/layout/pie/spider.ts

@@ -112,7 +112,7 @@ export function pieSpiderLabelLayout(items: LabelItem[], labels: IGroup[], shape
 
   // step 1: adjust items to spider
   each(items, (item) => {
-    const label = get(labelsMap, item.id);
+    const label = get(labelsMap, [item.id]);
     if (!label) {
       return;
     }
@@ -177,7 +177,7 @@ export function pieSpiderLabelLayout(items: LabelItem[], labels: IGroup[], shape
     const inRight = key === RIGHT_HALF_KEY;
 
     each(half, (item) => {
-      const label: IGroup = get(labelsMap, item && item.id);
+      const label: IGroup = get(labelsMap, item && [item.id]);
       if (!label) {
         return;
       }

tests/bugs/3160-spec.ts

@@ -0,0 +1,62 @@
+import { Chart } from '../../src';
+import { createDiv, removeDom } from '../util/dom';
+
+describe('#3160', () => {
+  const div = createDiv();
+  const chart = new Chart({
+    container: div, // 指定图表容器 ID
+    height: 300, // 指定图表高度
+    autoFit: true,
+  });
+  chart.coordinate('theta');
+
+  const data = [
+    { type: '1', item: 1, value: 0.1 },
+    { type: '2', item: 4, value: 0.4 },
+    { type: '1.3', item: 2, value: 0.2 },
+    { type: '2.5', item: 3, value: 0.3 },
+  ];
+  chart.data(data);
+
+  chart
+    .interval()
+    .position('value')
+    .color('type')
+    .label('type', { layout: { type: 'pie-spider' } })
+    .adjust('stack');
+
+  chart.render();
+
+  it('mapping color to linear scale, label render normal', () => {
+    const labels = chart.geometries[0].labelsContainer.getChildren();
+    expect(labels.length).toBe(4);
+  });
+
+  it('spider label, render normal', () => {
+    chart.clear();
+    chart
+      .interval()
+      .position('value')
+      .color('type')
+      .label('type', { layout: { type: 'pie-spider' } })
+      .adjust('stack');
+    chart.render();
+
+    const labels = chart.geometries[0].labelsContainer.getChildren();
+
+    const label1 = labels.find((l) => l.get('id') === `1-${data[0].type}`);
+    const label2 = labels.find((l) => l.get('id') === `1-${data[1].type}`);
+    const label3 = labels.find((l) => l.get('id') === `1-${data[2].type}`);
+    const label4 = labels.find((l) => l.get('id') === `1-${data[3].type}`);
+
+    // @ts-ignore
+    expect(label1.getChildren()[0].getCanvasBBox().minX).toEqual(label2.getChildren()[0].getCanvasBBox().minX);
+    // @ts-ignore
+    expect(label3.getChildren()[0].getCanvasBBox().maxX).toEqual(label4.getChildren()[0].getCanvasBBox().maxX);
+  });
+
+  afterAll(() => {
+    chart.destroy();
+    removeDom(div);
+  });
+});

tests/unit/geometry/label/layout/pie-spider-spec.ts

@@ -95,6 +95,61 @@ describe('pie-spider-label layout', () => {
     expect(label1.getBBox().y + label1.getBBox().height / 2).toEqual(center.y);
   });
 
+  it('异常情况', () => {
+    chart.clear();
+
+    let data = [
+      { item: '事例一', count: 35 },
+      { item: '事例二', count: 25 },
+      { item: '事例三', count: 20 },
+      { item: '事例四', count: 20 },
+      { item: '事例五', count: 20 },
+    ];
+    chart.data(data);
+
+    chart.coordinate({
+      type: 'theta',
+      cfg: {
+        radius: 0.5,
+      },
+    });
+
+    chart
+      .interval()
+      .adjust('stack')
+      .position('count')
+      .color('item')
+      .label('item', {
+        layout: { type: 'pie-spider' },
+      });
+
+    chart.render();
+    let labels = chart.geometries[0].labelsContainer.getChildren();
+    expect(labels.length).toBe(5);
+
+    let label1 = labels.find((l) => l.get('id') === `1-${data[0].item}`);
+    let label2 = labels.find((l) => l.get('id') === `1-${data[1].item}`);
+
+    // @ts-ignore
+    expect(label1.getChildren()[0].getCanvasBBox().minX).toEqual(label2.getChildren()[0].getCanvasBBox().minX);
+
+    data = [
+      { item: '事例.一', count: 35 },
+      { item: '事例.二', count: 25 },
+      { item: '事例三', count: 20 },
+      { item: '事例四', count: 20 },
+      { item: '事例五', count: 20 },
+    ];
+    chart.changeData(data);
+
+    labels = chart.geometries[0].labelsContainer.getChildren();
+
+    label1 = labels.find((l) => l.get('id') === `1-${data[0].item}`);
+    label2 = labels.find((l) => l.get('id') === `1-${data[1].item}`);
+    // @ts-ignore
+    expect(label1.getChildren()[0].getCanvasBBox().minX).toEqual(label2.getChildren()[0].getCanvasBBox().minX);
+  });
+
   afterAll(() => {
     chart.destroy();
     removeDom(div);