fix: label2为空的情况下Spider布局 (#2129)

Author: tangying1027

packages/f2/src/components/pieLabel/spider.ts

@@ -1,18 +1,18 @@
 export const adjustPosition = (half, showSide, props, labelWidth) => {
-  const { coord, sidePadding, adjustOffset } = props;
+  const { coord, sidePadding, adjustOffset, adjustRatio } = props;
   const { left: coordLeft, right: coordRight } = coord;
   const labels = [];
   let lastY = 0;
   let delta;
 
   half.forEach((label) => {
-    const { anchor, inflection, y, height } = label;
+    const { anchor, inflection, y, height, label2 } = label;
 
     const points = [anchor, inflection];
     const endX = showSide === 'left' ? coordLeft + sidePadding : coordRight - sidePadding;
     let endY = y;
 
-    delta = y - lastY - (lastY === 0 ? 0.5 * height : height);
+    delta = y - lastY - (lastY === 0 && label2 ? 0.5 * height : height);
 
     if (delta < 0) {
       // 文本调整下去了 需要添加折线
@@ -28,7 +28,8 @@ export const adjustPosition = (half, showSide, props, labelWidth) => {
       };
 
       if (
-        Math.abs(delta) < height * props.adjustRatio ||
+        Math.abs(delta) < height * adjustRatio ||
+        point2.y < lastY ||
         (showSide === 'right' && point2.x < inflection.x) ||
         (showSide === 'left' && point2.x > inflection.x)
       ) {

packages/f2/src/components/pieLabel/withPieLabel.tsx

@@ -273,6 +273,7 @@ export default (View) => {
             // 折线的点
             const points = [anchor, inflection];
             const endX = coordRight - sidePadding;
+
             const endY = coordTop + halfLabelHeight + labelHeight * index;
 
             // 文本开始点
@@ -337,7 +338,10 @@ export default (View) => {
         records = customRecords
           .map((record) => {
             return allRecords.find(
-              (d) => d.origin[colorField] === record[colorField] && d.origin[xField] === record[xField] && d.origin[yField] === record[yField]
+              (d) =>
+                d.origin[colorField] === record[colorField] &&
+                d.origin[xField] === record[xField] &&
+                d.origin[yField] === record[yField]
             );
           })
           .filter(Boolean);

packages/f2/test/components/pieLabel/__image_snapshots__/spider-test-tsx-spider-pie-label-label-2-为空的情况-1-snap.png

@@ -524,4 +524,82 @@ describe('Spider PieLabel', () => {
     await delay(300);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('label2为空的情况', async () => {
+    const context = createContext('label2为空的情况', {
+      width: '300px',
+      height: '120px',
+    });
+    const data = [
+      {
+        amount: 5,
+        memo: '其他',
+        const: 'const',
+      },
+      {
+        amount: 6,
+        memo: '消费',
+        const: 'const',
+      },
+      {
+        amount: 7,
+        memo: '黄金',
+        const: 'const',
+      },
+      {
+        amount: 8,
+        memo: '海外债',
+        const: 'const',
+      },
+      {
+        amount: 20,
+        memo: '成长',
+        const: 'const',
+      },
+      {
+        amount: 54,
+        memo: '固收',
+        const: 'const',
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={2}>
+        <Chart
+          data={data}
+          coord={{
+            type: 'polar',
+            transposed: true,
+            radius: 0.8,
+          }}
+        >
+          <Interval
+            x="const"
+            y="amount"
+            adjust="stack"
+            color="memo"
+            style={{
+              stroke: '#fff', // 描边颜色（border）
+              lineWidth: 0.5,
+            }}
+          />
+          <PieLabel
+            type="spider"
+            label1={(data) => {
+              return {
+                text: `${data.memo} ${data.amount}%`,
+                fill: '#333',
+              };
+            }}
+            label2=""
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
 });