fix(图表): 修复柱条图调整柱宽比例不生效的问题

2026-06-16 20:42:07 +08:00 · 2025-09-29 18:42:09 +08:00
parent 89406085ab
commit a2c40017ce
10 changed files with 81 additions and 4 deletions
--- 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
@@ -16,6 +16,7 @@ import {
  TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import {
+  DEFAULT_BASIC_STYLE,
  DEFAULT_YAXIS_EXT_STYLE,
  DEFAULT_YAXIS_STYLE
 } from '@/views/chart/components/editor/util/chart'
@@ -205,6 +206,7 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
    const tooltipOptions: ViewSpec = {
      tooltip: d => d,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltipAttr),
@@ -283,8 +285,18 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
      },
      y: {
        nice: true
+      },
+      x: {
+        type: 'band',
+        paddingInner: 0.01
      }
    }
+    if (this.name === 'bar' || this.name === 'percentage-bar-stack' || this.name === 'waterfall') {
+      scale.x.paddingInner = -0.21
+    }
+    if (this.name === 'bar-group') {
+      scale.x.paddingInner = -0.1
+    }
    const basicStyle = parseJson(chart.customAttr).basicStyle
    const { radiusColumnBar, columnBarRightAngleRadius } = basicStyle
    let style
@@ -302,6 +314,21 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
        radius: 0
      }
    }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }
    return {
      ...options,
      children: [
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
@@ -76,6 +76,7 @@ export class GroupStackBar extends StackBar {
    const tooltipOptions: ViewSpec = {
      tooltip: tooltipMap,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- 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 { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
 import { getLineDash, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { Chart } from '@antv/g2'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'

 const { t } = useI18n()
 /**
@@ -60,7 +61,7 @@ export class HorizontalBar extends Bar {
        ? setGradientColor(hexColorToRGBA(ele, basicStyle.alpha), true)
        : hexColorToRGBA(ele, basicStyle.alpha)
    )
-    const style = {
+    let style = {
      ...(basicStyle.radiusColumnBar === 'topRoundAngle' && {
        radiusTopLeft: basicStyle.columnBarRightAngleRadius,
        radiusTopRight: basicStyle.columnBarRightAngleRadius
@@ -71,6 +72,27 @@ export class HorizontalBar extends Bar {
      ...(basicStyle.radiusColumnBar !== 'topRoundAngle' &&
        basicStyle.radiusColumnBar !== 'roundAngle' && { radius: 0 })
    }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }
+    if (this.name === 'bar-stack-horizontal' || this.name === 'progress-bar') {
+      children[0].scale.x = {
+        type: 'band',
+        paddingInner: 0.01
+      }
+    }
    children[0].scale.color.range = colors
    children[0].scale.y.nice = true
    children[0].style = { ...children[0].style, ...style }
@@ -233,7 +255,11 @@ export class HorizontalBar extends Bar {
      coordinate: { transform: [{ type: 'transpose' }] },
      scale: {
        color: { range: [] },
-        y: { nice: true }
+        y: { nice: true },
+        x: {
+          type: 'band',
+          paddingInner: -0.21
+        }
      }
    })
  }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
@@ -82,6 +82,7 @@ export class PercentageStackBar extends GroupStackBar {
    const tooltipOptions: ViewSpec = {
      tooltip: tooltipMap,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
@@ -74,6 +74,7 @@ export class PercentageStackBar extends HorizontalStackBar {
    const tooltipOptions: ViewSpec = {
      tooltip: tooltipMap,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
@@ -282,6 +282,7 @@ export class ProgressBar extends HorizontalStackBar {
    const tooltipOptions: ViewSpec = {
      tooltip: a => a,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts
@@ -202,6 +202,7 @@ export class RangeBar extends HorizontalBar {
        ]
      },
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- 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
@@ -118,6 +118,7 @@ export class StackBar extends Bar {
    const tooltipOptions: ViewSpec = {
      tooltip: tooltipMap,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
@@ -81,6 +81,7 @@ export class HorizontalStackBar extends HorizontalBar {
    const tooltipOptions: ViewSpec = {
      tooltip: a => a,
      interaction: {
+        ...children[0].interaction,
        tooltip: {
          mount: createTooltipWrapper(chart),
          css: tooltipCss(tooltip),
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts
@@ -6,6 +6,7 @@ import { ViewSpec, configTooltip } from '@/views/chart/components/js/panel/chart
 import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'

 const { t } = useI18n()

@@ -182,10 +183,11 @@ export class Waterfall extends Bar {

    const scale = {
      color: { range: colors },
-      y: { nice: true }
+      y: { nice: true },
+      x: { paddingInner: -0.005 }
    }

-    const style = {
+    let style = {
      radius:
        basicStyle.radiusColumnBar === 'roundAngle' ? basicStyle.columnBarRightAngleRadius : 0,
      ...(basicStyle.radiusColumnBar === 'topRoundAngle' && {
@@ -193,6 +195,21 @@ export class Waterfall extends Bar {
        radiusTopRight: basicStyle.columnBarRightAngleRadius
      })
    }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }

    return {
      ...options,