diff --git a/packages/f2/src/components/axis/types.d.ts b/packages/f2/src/components/axis/types.d.ts index 7b31cf2de..0a7fc57b8 100644 --- a/packages/f2/src/components/axis/types.d.ts +++ b/packages/f2/src/components/axis/types.d.ts @@ -120,6 +120,8 @@ export interface AxisProps< mask?: string; min?: number; max?: number; + width?: number | string; + height?: number | string; nice?: boolean; ticks?: Array; /** diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx index 35bf38406..741af645f 100644 --- a/packages/f2/src/components/axis/withAxis.tsx +++ b/packages/f2/src/components/axis/withAxis.tsx @@ -214,7 +214,8 @@ export default (View) => { } measureLayout(): PositionLayout | PositionLayout[] { - const { props } = this; + const { props, context } = this; + const { px2hd } = context; const { visible, coord } = props; if (visible === false) { return null; @@ -225,7 +226,12 @@ export default (View) => { const { isPolar } = coord; const dimType = this._getDimType(); - const { width, height } = bbox; + + const { width, height } = deepMix( + bbox, + px2hd({ width: props?.width, height: props?.height }) + ); + if (isPolar) { // 机坐标系的 y 不占位置 if (dimType === 'y') { diff --git "a/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" "b/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" new file mode 100644 index 000000000..62bc88cb2 Binary files /dev/null and "b/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" differ diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx index aacfae96d..2a2606461 100644 --- a/packages/f2/test/components/axis/axis.test.tsx +++ b/packages/f2/test/components/axis/axis.test.tsx @@ -744,4 +744,57 @@ describe('Axis 轴', () => { await delay(1000); expect(context).toMatchImageSnapshot(); }); + + it('设置width height', async () => { + const context = createContext('文本换行'); + + const data = [ + { + time: 'Jan.', + value: 551990, + }, + { + time: 'Feb.', + value: 513513, + }, + { + time: 'Mar.', + value: 538780, + }, + { + time: 'Apr.', + value: 419562, + }, + { + time: 'May.', + value: 332167, + }, + { + time: 'Jun.', + value: 297956, + }, + { + time: 'Jul.', + value: 311760, + }, + { + time: 'Aug.', + value: 330824, + }, + ]; + const { props } = ( + + + + + + + + ); + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + }); });