From ab94b48549ac0e5a26af47151dfdc3a1974f9ec6 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 26 May 2026 12:00:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9F=B1=E6=9D=A1=E5=9B=BE=E5=9B=BE=E4=BE=8B=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=9A=84=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4=E7=9B=B8=E5=85=B3=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E4=BB=A5=E6=8F=90=E5=8D=87=E5=8F=AF=E7=94=A8=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/js/panel/charts/g2/bar/bar.ts  | 38 +++++++++----------
 .../components/js/panel/types/impl/g2.ts      | 20 ++++++++--
 2 files changed, 36 insertions(+), 22 deletions(-)

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 53566dc023..b7b7ed8b55 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
@@ -1,5 +1,10 @@
 import { Chart as G2Column } from '@antv/g2'
-import { G2ChartView, G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2'
+import {
+  G2ChartView,
+  G2DrawOptions,
+  LEGEND_NAV_CONTROLLER_PADDING,
+  getLegendNavButtonPath
+} from '@/views/chart/components/js/panel/types/impl/g2'
 import {
   BAR_AXIS_TYPE,
   BAR_EDITOR_PROPERTY,
@@ -403,38 +408,28 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
         const l = JSON.parse(JSON.stringify(customStyle.legend))
         if (l.show) {
           let position
-          const orient = l.orient
           const legendSymbol = l.icon
           const legendSize = l.size
           const legendFontSize = l.fontSize
           const legendColor = l.color
           // position 图例布局
           // layoutJustifyContent 图例实例布局
-          let layoutJustifyContent = 'center'
           // 根据图例方向和位置设置布局和位置
-          if (orient === 'horizontal') {
-            // 水平布局
-            position = l.vPosition === 'center' ? 'bottom' : l.vPosition
+          let layoutJustifyContent = 'center'
+          if (l.vPosition === 'top' || l.vPosition === 'bottom') {
+            position = l.vPosition
             layoutJustifyContent =
-              l.hPosition === 'left' && l.vPosition !== 'center'
+              l.hPosition === 'left'
                 ? 'flex-start'
-                : l.hPosition === 'right' && l.vPosition !== 'center'
+                : l.hPosition === 'right'
                 ? 'flex-end'
                 : 'center'
           } else {
-            // 垂直布局
-            position = l.hPosition === 'center' ? 'left' : l.hPosition
-            layoutJustifyContent =
-              l.vPosition === 'top' && l.hPosition !== 'center'
-                ? 'flex-start'
-                : l.vPosition === 'bottom' && l.hPosition !== 'center'
-                ? 'flex-end'
-                : 'center'
+            position = l.hPosition
           }
           const verticalLegend = position === 'left' || position === 'right'
           legend = {
             color: {
-              orientation: orient,
               position,
               layout: {
                 justifyContent: layoutJustifyContent
@@ -443,11 +438,16 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
               itemMarkerSize: legendSize,
               itemLabelFontSize: legendFontSize,
               itemLabelFill: legendColor,
-              navPageNumFontSize: legendSize,
+              navPageNumFontSize: legendFontSize,
               navPageNumFill: legendColor,
+              navPageNumFillOpacity: 1,
+              navButtonD: getLegendNavButtonPath(legendSize),
               navButtonSize: legendSize,
-              navOrientation: verticalLegend ? 'vertical' : 'horizontal',
+              navButtonFill: legendColor,
+              navButtonFillOpacity: 1,
+              navOrientation: 'horizontal',
               ...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 }),
+              navControllerPadding: LEGEND_NAV_CONTROLLER_PADDING,
               navControllerSpacing: 20
             }
           }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
index ed34c2ee60..37bb989a33 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
@@ -9,6 +9,15 @@ import { parseJson, setupSeriesColor } from '../../../util'
 import { isEmpty } from 'lodash-es'
 import { valueFormatter } from '../../../formatter'
 
+export const LEGEND_NAV_CONTROLLER_PADDING = 10
+export const LEGEND_NAV_CONTROLLER_SPACING = 12
+export const getLegendNavButtonPath = (size: number) => [
+  ['M', -size / 2, -size / 2],
+  ['L', size / 2, -size / 2],
+  ['L', 0, size / 2],
+  ['Z']
+]
+
 export interface G2DrawOptions<O> extends AntVDrawOptions<O> {
   /**
    * 缩放比例
@@ -68,11 +77,16 @@ export abstract class G2ChartView<
             itemLabelFill: legendColor,
             itemLabelFillOpacity: 1,
             itemLabelOpacity: 1,
-            navPageNumFontSize: legendSize,
+            navPageNumFontSize: legendFontSize,
             navPageNumFill: legendColor,
+            navPageNumFillOpacity: 1,
+            navButtonD: getLegendNavButtonPath(legendSize),
             navButtonSize: legendSize,
-            navOrientation: verticalLegend ? 'vertical' : 'horizontal',
-            navControllerSpacing: 4,
+            navButtonFill: legendColor,
+            navButtonFillOpacity: 1,
+            navOrientation: 'horizontal',
+            navControllerPadding: LEGEND_NAV_CONTROLLER_PADDING,
+            navControllerSpacing: LEGEND_NAV_CONTROLLER_SPACING,
             ...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 })
           }
         } else {