fix: label 为 null 时，图形更小 (#1443)

antvis · Apr 15, 2022 · 966906c · 966906c
1 parent cc15204
commit 966906c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -69,16 +69,20 @@ export default (View) => {
     getMaxBBox(ticks, style: Style): BBox {
       const { context } = this;
       const { measureText } = context;
-      const { labelOffset } = style;
+      const { label, labelOffset } = style;
 
       let width = 0;
       let height = 0;
       ticks.forEach((tick: Tick) => {
+        if (!label) return;
         const { labelStyle, text } = tick;
-        const bbox = measureText(text, { ...style.label, ...labelStyle });
+        const bbox = measureText(text, { ...label, ...labelStyle });
         width = Math.max(width, bbox.width);
         height = Math.max(height, bbox.height);
       });
+      if (!width && !height) {
+        return { width, height };
+      }
 
       const bbox = {
         width: width + labelOffset,
@@ -219,6 +223,7 @@ export default (View) => {
         if (dimType === 'y') {
           return null;
         }
+        console.log(bbox);
         // 4 个方向都需要留空
         return ['top', 'right', 'bottom', 'left'].map(
           (position: 'top' | 'right' | 'bottom' | 'left') => {

diff --git a/...s/line/__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图-label-为-null-1-snap.png b/...s/line/__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图-label-为-null-1-snap.png
diff --git a/packages/f2/test/components/line/radar.test.tsx b/packages/f2/test/components/line/radar.test.tsx
@@ -161,12 +161,9 @@ describe('雷达图', () => {
       const context = createContext('Tooltip 默认展示');
       const { props } = (
         <Canvas context={context} pixelRatio={1}>
-          <Chart
-            data={data1}
-            coord="polar"            
-          >
+          <Chart data={data1} coord="polar">
             <Axis field="time" grid="line" />
-            <Axis field="value" grid="line" style={{label: {text: ''}}} />
+            <Axis field="value" grid="line" style={{ label: null }} />
             <Line x="time" y="value" color="name" />
             <Tooltip alwaysShow={true} defaultItem={data1[0]} snap />
           </Chart>
@@ -178,6 +175,30 @@ describe('雷达图', () => {
 
       await delay(1000);
       expect(context).toMatchImageSnapshot();
-    });    
+    });
+
+    it('雷达图-label 为 null', async () => {
+      const context = createContext();
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart data={data} coord="polar">
+            <Axis
+              field="item"
+              style={{
+                label: null,
+              }}
+            />
+            <Axis field="score" />
+            <Line x="item" y="score" color="user" />
+          </Chart>
+        </Canvas>
+      );
+
+      const canvas = new Canvas(props);
+      canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
   });
 });