From d497d6c892852d59cbf16bb37818ed818d422b80 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Wed, 16 Apr 2025 14:38:38 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=BC=80=E5=90=AF=E6=9D=A1=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E5=9C=86=E8=A7=92=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/bar/bar.ts | 2 +- .../js/panel/charts/bar/bidirectional-bar.ts | 15 +--- .../js/panel/charts/bar/horizontal-bar.ts | 6 +- .../js/panel/charts/bar/progress-bar.ts | 12 +-- .../js/panel/charts/bar/range-bar.ts | 24 ++---- .../components/js/panel/common/common_antv.ts | 81 ++++++++++++++----- 6 files changed, 78 insertions(+), 62 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts index 52e8dd8a3e..6aa4d16b49 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts @@ -187,7 +187,7 @@ export class Bar extends G2PlotChartView { } options = { ...options, - ...configRoundAngle(basicStyle, 'columnStyle') + ...configRoundAngle(chart, 'columnStyle') } let columnWidthRatio const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts index 40430b628d..4ec976a02d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts @@ -6,6 +6,7 @@ import { cloneDeep, defaultTo, isEmpty, map } from 'lodash-es' import { configAxisLabelLengthLimit, configPlotTooltipEvent, + configRoundAngle, getPadding, getTooltipContainer, getTooltipItemConditionColor, @@ -212,17 +213,9 @@ export class BidirectionalHorizontalBar extends G2PlotChartView< ...options, layout: basicStyle.layout } - if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) { - const valueField = basicStyle.layout === 'vertical' ? 'valueExt' : 'value' - const radius = Array(basicStyle.radiusColumnBar === 'roundAngle' ? 4 : 2).fill( - basicStyle.columnBarRightAngleRadius - ) - options = { - ...options, - barStyle: datum => ({ - radius: datum[valueField] && radius.length === 2 ? [0, 0, ...radius] : radius - }) - } + options = { + ...options, + ...configRoundAngle(chart, 'barStyle') } return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts index d089a8041f..89bcd0d04c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts @@ -176,11 +176,7 @@ export class HorizontalBar extends G2PlotChartView { } options = { ...options, - ...configRoundAngle( - basicStyle, - 'barStyle', - ['bar-stack-horizontal', 'percentage-bar-stack-horizontal'].includes(this.name) - ) + ...configRoundAngle(chart, 'barStyle') } let barWidthRatio diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts index 8a683189e9..38dad38d6c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts @@ -3,6 +3,7 @@ import { flow, hexColorToRGBA, parseJson } from '../../../util' import { configAxisLabelLengthLimit, configPlotTooltipEvent, + configRoundAngle, getTooltipContainer, setGradientColor, TOOLTIP_TPL @@ -183,14 +184,9 @@ export class ProgressBar extends G2PlotChartView { } } } - if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) { - const radius = Array(basicStyle.radiusColumnBar === 'roundAngle' ? 4 : 2).fill( - basicStyle.columnBarRightAngleRadius - ) - options = { - ...options, - barStyle: { radius } - } + options = { + ...options, + ...configRoundAngle(chart, 'barStyle') } let barWidthRatio diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts index ef289bb452..6520a3a790 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts @@ -6,6 +6,7 @@ import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar' import { configAxisLabelLengthLimit, configPlotTooltipEvent, + configRoundAngle, getPadding, getTooltipContainer, setGradientColor, @@ -321,25 +322,10 @@ export class RangeBar extends G2PlotChartView { } } } - if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) { - const radius = Array(2).fill(basicStyle.columnBarRightAngleRadius) - options = { - ...options, - barStyle: datum => { - const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle' - const baseRadius = [...radius, ...radius] - return { - radius: - datum.values[0] < datum.values[1] - ? isTopRound - ? [...radius, 0, 0] - : baseRadius - : isTopRound - ? [0, 0, ...radius] - : baseRadius - } - } - } + + options = { + ...options, + ...configRoundAngle(chart, 'barStyle') } let barWidthRatio const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index ebbed53cc5..34ac21b7b8 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -2217,8 +2217,6 @@ export function handleConditionsStyle(chart: Chart, options) { // 辅助函数：配置柱条样式颜色，条形图为barStyle,柱形图为columnStyle const columnStyle = data => { return { - ...options.columnStyle, - ...options.barStyle, ...(data[colorField]?.[0] ? { fill: data[colorField][0] } : {}) } } @@ -2232,8 +2230,8 @@ export function handleConditionsStyle(chart: Chart, options) { const tmpOption = { ...options, rawFields, - columnStyle: columnStyle, - barStyle: columnStyle, + ...configRoundAngle(chart, 'columnStyle', columnStyle), + ...configRoundAngle(chart, 'barStyle', columnStyle), tooltip: { ...options.tooltip, ...(options.tooltip['customItems'] @@ -2397,36 +2395,80 @@ export const numberToChineseUnderHundred = (num: number): string => { /** * 配置柱条图的圆角 - * @param basicStyle * @param styleName - * @param isStackHorizontalBar 堆叠条形图、百分比条形图 + * @param callBack 自定义其他属性函数 */ -export const configRoundAngle = ( - basicStyle: DeepPartial, - styleName: string, - isStackHorizontalBar?: boolean -) => { +export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (datum) => {}) => { + const { basicStyle } = parseJson(chart.customAttr) if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) { const radius = Array(2).fill(basicStyle.columnBarRightAngleRadius) + const topRadius = [0, 0, ...radius] + const bottomRadius = [...radius, 0, 0] + const finalRadius = [...radius, ...radius] const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle' + // 对称条形图 + if (chart.type === 'bidirectional-bar') { + const valueField = basicStyle.layout === 'vertical' ? 'valueExt' : 'value' + return { + [styleName]: datum => ({ + radius: datum[valueField] && isTopRound ? topRadius : isTopRound ? radius : finalRadius, + ...(callBack ? callBack(datum) : {}) + }) + } + } + // 进度条 + if (chart.type === 'progress-bar') { + return { + [styleName]: datum => { + return { + radius: isTopRound ? bottomRadius : finalRadius, + ...(callBack ? callBack(datum) : {}) + } + } + } + } + // 区间条形图 + if (chart.type === 'bar-range') { + return { + [styleName]: datum => { + return { + radius: + datum.values[0] < datum.values[1] + ? isTopRound + ? bottomRadius + : finalRadius + : isTopRound + ? topRadius + : finalRadius, + ...(callBack ? callBack(datum) : {}) + } + } + } + } + // 堆叠条形图、百分比条形图第一个和最后一个反转 + const isStackHorizontalBar = [ + 'bar-stack-horizontal', + 'percentage-bar-stack-horizontal' + ].includes(chart.type) // 配置柱条样式 const style = datum => { if (isTopRound && datum.isFirst && datum.isLast) { - return { radius } + return { radius, ...(callBack ? callBack(datum) : {}) } } if (!isTopRound && datum.isFirst && datum.isLast) { - return { radius: [...radius, ...radius] } + return { radius: finalRadius, ...(callBack ? callBack(datum) : {}) } } - // 堆叠条形图、百分比条形图第一个和最后一个反转 if (isStackHorizontalBar) { if (datum.isLast || (!isTopRound && datum.isFirst)) { return { - radius: datum.isFirst ? [0, 0, ...radius] : radius + radius: datum.isFirst ? topRadius : radius, + ...(callBack ? callBack(datum) : {}) } } } else if (datum.isFirst || (!isTopRound && datum.isLast)) { return { - radius: datum.isLast ? [0, 0, ...radius] : radius + radius: datum.isLast ? topRadius : radius, + ...(callBack ? callBack(datum) : {}) } } } @@ -2434,13 +2476,16 @@ export const configRoundAngle = ( [styleName]: style } } - return {} + return { + [styleName]: datum => { + return { ...(callBack ? callBack(datum) : {}) } + } + } } /** * 为圆角组装options.data， * 添加 isFirst 和 isLast 属性 - * 不会影响原始数据排序 * @param data * @param isGroup * @param isStack