diff --git a/common/changes/@visactor/vrender-components/fix-legend-empty-page_2024-10-29-11-27.json b/common/changes/@visactor/vrender-components/fix-legend-empty-page_2024-10-29-11-27.json new file mode 100644 index 000000000..77c69154c --- /dev/null +++ b/common/changes/@visactor/vrender-components/fix-legend-empty-page_2024-10-29-11-27.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vrender-components", + "comment": "fix: last page is empty in legend. fix@VisActor/VChart#3344", + "type": "none" + } + ], + "packageName": "@visactor/vrender-components" +} \ No newline at end of file diff --git a/packages/vrender-components/src/legend/discrete/discrete.ts b/packages/vrender-components/src/legend/discrete/discrete.ts index d5ee1400b..540577849 100644 --- a/packages/vrender-components/src/legend/discrete/discrete.ts +++ b/packages/vrender-components/src/legend/discrete/discrete.ts @@ -1047,13 +1047,37 @@ export class DiscreteLegend extends LegendBase { } // 重新进行布局 - - (itemsContainer.getChildren() as unknown as IGroup[]).forEach((item, index) => { - const { height } = item.attribute; - - pages = Math.floor((startY + height) / contentHeight) + 1; - startY += spaceRow + (height as number); - }); + // 边界场景: 最后一项item的文字内容在倒数第二页, 但由于bounds比文字本身大一点, 触发分页, 导致最后一页是空白 + // 关联issue: https://github.com/VisActor/VChart/issues/3344 + // 解决方式: + // - 所有的item 高度一致的时候: 按照 (itemHeight + space) * 倍数 布局 + // - item高度不一致的情况: 最后一项的的高度分到最后一页的高度 >= 1/3 才分页 + const items = itemsContainer.getChildren() as IGroup[]; + const itemsHeightArr = items.map((item: IGroup) => item.attribute.height); + if (itemsHeightArr.length === 1 || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) { + const itemHeight = itemsHeightArr[0]; + const maxContentHeight = contentHeight; + const pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight)); + contentHeight = pageItemsCount * (spaceRow + itemHeight); + pages = Math.ceil(items.length / pageItemsCount); + } else { + items.forEach((item, index) => { + const { height } = item.attribute; + + const prePages = pages; + const preStartY = startY; + pages = Math.floor((startY + height) / contentHeight) + 1; + startY += spaceRow + (height as number); + if ( + prePages !== pages && // 触发分页 + index === itemsContainer.getChildren().length - 1 && // + startY - contentHeight >= (1 / 3) * height + ) { + contentHeight = preStartY + height; // 保证刚好完全展示最后一项 + pages -= 1; // 不分页 + } + }); + } this._itemContext.totalPage = pages; this._itemContext.pages = pages;