mirror of
https://github.com/dataease/dataease.git
synced 2026-06-18 05:18:07 +08:00
fix(图表): 修复堆叠柱条图圆角在空置处理策略保持为空时显示开口方向不正确的问题
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user