fix(图表): 修复堆叠柱条图圆角在空置处理策略保持为空时显示开口方向不正确的问题

This commit is contained in:
jianneng-fit2cloud
2026-06-05 16:43:22 +08:00
parent 9b018ed1bf
commit d9dc77efc8
4 changed files with 72 additions and 0 deletions

View File

@@ -37,6 +37,7 @@ import {
getStackTooltipGroupName,
getTooltipItemFormatter,
handleEmptyDataStrategy,
filterStackBreakLineNullData,
isSeriesTooltipFormatterShown,
isTooltipItemShown,
renderGroupedTooltipItems,
@@ -390,6 +391,11 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
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<ViewSpec, G2Column> {
return 1 - columnPadding
}
protected getStackOuterRadiusStyle(
basicStyle: DeepPartial<ChartBasicStyle>
): Record<string, any> {
// 只覆盖堆叠柱条,普通柱条仍沿用原有单个 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<ViewSpec, G2Column> {
protected configEmptyDataStrategy(chart: Chart, options: ViewSpec): ViewSpec {
handleEmptyDataStrategy(chart, options)
// 空值策略先补齐数据,再移除仅用于占位但不应绘制的堆叠空片段
filterStackBreakLineNullData(chart, options)
return options
}

View File

@@ -221,6 +221,30 @@ export function handleEmptyDataStrategy<O extends ViewSpec>(chart: Chart, option
return options
}
// 堆叠柱条在保持为空时会生成 null 占位,过滤后避免空片段参与 stackY 形成缺口或抢占圆角位置
export function filterStackBreakLineNullData<O extends ViewSpec>(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
}

View File

@@ -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
}

View File

@@ -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
}