From d9dc77efc89dc7be5e98b888cb91ab22700010a3 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Fri, 5 Jun 2026 16:43:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=A0=86=E5=8F=A0=E6=9F=B1=E6=9D=A1=E5=9B=BE=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E5=9C=A8=E7=A9=BA=E7=BD=AE=E5=A4=84=E7=90=86=E7=AD=96=E7=95=A5?= =?UTF-8?q?=E4=BF=9D=E6=8C=81=E4=B8=BA=E7=A9=BA=E6=97=B6=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=BC=80=E5=8F=A3=E6=96=B9=E5=90=91=E4=B8=8D=E6=AD=A3=E7=A1=AE?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/g2/bar/bar.ts | 37 +++++++++++++++++++ .../js/panel/charts/g2/bar/barUtil.ts | 24 ++++++++++++ .../js/panel/charts/g2/bar/horizontal-bar.ts | 8 ++++ .../js/panel/charts/g2/bar/stack-bar.ts | 3 ++ 4 files changed, 72 insertions(+) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts index 0078485365..9bec829c97 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts @@ -37,6 +37,7 @@ import { getStackTooltipGroupName, getTooltipItemFormatter, handleEmptyDataStrategy, + filterStackBreakLineNullData, isSeriesTooltipFormatterShown, isTooltipItemShown, renderGroupedTooltipItems, @@ -390,6 +391,11 @@ export class Bar extends G2ChartView { radius: 0 } } + // 堆叠图按整根柱子的外轮廓圆角处理，中间色块连接处保持直边 + style = { + ...style, + ...this.getStackOuterRadiusStyle(basicStyle) + } const columnWidthRatio = this.getColumnWidthRatio(basicStyle) const columnPadding = this.getColumnPadding(columnWidthRatio) let transform = children[0].transform @@ -444,6 +450,35 @@ export class Bar extends G2ChartView { return 1 - columnPadding } + protected getStackOuterRadiusStyle( + basicStyle: DeepPartial + ): Record { + // 只覆盖堆叠柱条，普通柱条仍沿用原有单个 interval 圆角逻辑 + if ( + ![ + 'bar-stack', + 'bar-group-stack', + 'percentage-bar-stack', + 'bar-stack-horizontal', + 'percentage-bar-stack-horizontal' + ].includes(this.name) + ) { + return {} + } + if (!['topRoundAngle', 'roundAngle'].includes(basicStyle.radiusColumnBar)) { + return {} + } + const radius = basicStyle.columnBarRightAngleRadius + // G2 stackY 使用 first 和 last 控制外端圆角，innerRadius 为 0 可避免中间连接处圆角 + return { + radiusTopLeft: radius, + radiusTopRight: radius, + radiusBottomRight: radius, + radiusBottomLeft: radius, + innerRadius: 0 + } + } + protected configDodgePadding( transforms: ChildSpec['transform'], padding: number @@ -933,6 +968,8 @@ export class Bar extends G2ChartView { protected configEmptyDataStrategy(chart: Chart, options: ViewSpec): ViewSpec { handleEmptyDataStrategy(chart, options) + // 空值策略先补齐数据，再移除仅用于占位但不应绘制的堆叠空片段 + filterStackBreakLineNullData(chart, options) return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/barUtil.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/barUtil.ts index 55e147c744..75f351a6ee 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/barUtil.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/barUtil.ts @@ -221,6 +221,30 @@ export function handleEmptyDataStrategy(chart: Chart, option return options } +// 堆叠柱条在保持为空时会生成 null 占位，过滤后避免空片段参与 stackY 形成缺口或抢占圆角位置 +export function filterStackBreakLineNullData(chart: Chart, options: O): O { + const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy + if (strategy !== 'breakLine') return options + + const child = options.children?.[0] + // 仅处理 interval 的 stackY 场景，避免影响非堆叠图对空值的展示语义 + if (!child?.transform?.some(transform => transform.type === 'stackY')) return options + + const childData = child.data + const rootData = (options as any).data + const data = childData ?? rootData + if (!Array.isArray(data) || !data.some(item => item?.value === null)) return options + + // 保留原始数据顺序，只移除 G2 不应绘制的空值占位 + const filteredData = data.filter(item => item?.value !== null) + if (childData) { + child.data = filteredData + } else { + ;(options as any).data = filteredData + } + return options +} + export function tooltipWrapperId(container: string) { return 'G2-TOOLTIP-WRAPPER-' + container } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts index 0cc0eb5767..c7ca0290cd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts @@ -10,6 +10,7 @@ import { setUpStackSeriesColor } from '@/views/chart/components/js/util' import { + filterStackBreakLineNullData, handleEmptyDataStrategy, ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil' @@ -84,6 +85,11 @@ export class HorizontalBar extends Bar { ...(basicStyle.radiusColumnBar !== 'topRoundAngle' && basicStyle.radiusColumnBar !== 'roundAngle' && { radius: 0 }) } as any + // 横向堆叠同样按整根条的外轮廓圆角处理，避免只有右端圆角 + style = { + ...style, + ...this.getStackOuterRadiusStyle(basicStyle) + } const columnWidthRatio = this.getColumnWidthRatio(basicStyle) const columnPadding = this.getColumnPadding(columnWidthRatio) if (columnWidthRatio) { @@ -325,6 +331,8 @@ export class HorizontalBar extends Bar { protected configEmptyDataStrategy(chart: Chart, options: ViewSpec): ViewSpec { handleEmptyDataStrategy(chart, options) + // 横向堆叠继承此流程，需要移除保持为空补出的 null 片段 + filterStackBreakLineNullData(chart, options) return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts index a7d6b580f1..2e885261fe 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts @@ -17,6 +17,7 @@ import { getStackSeriesIndexMap, getStackSeriesOrder, getStackTooltipGroupName, + filterStackBreakLineNullData, handleEmptyDataStrategy, renderGroupedTooltipItems, sortStackTooltipItems, @@ -228,6 +229,8 @@ export class StackBar extends Bar { protected configEmptyDataStrategy(chart: Chart, options: ViewSpec): ViewSpec { handleEmptyDataStrategy(chart, options) + // 普通和分组堆叠会覆盖基类流程，这里同步过滤保持为空补出的 null 片段 + filterStackBreakLineNullData(chart, options) return options }