From ccb61c186f3c4082337e609cd1d05dc741371a37 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Sat, 11 May 2024 16:59:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8-=E5=AF=B9=E7=A7=B0?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE):=20=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=98=BE=E7=A4=BA=E6=96=B9=E5=90=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/models/chart/chart-attr.d.ts          |  4 ++++
 .../components/BasicStyleSelector.vue         | 17 ++++++++++++++++
 .../js/panel/charts/bar/bidirectional-bar.ts  | 20 ++++++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index 19117984b1..35ff617b66 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -229,6 +229,10 @@ declare interface ChartBasicStyle {
    * 其他项的标签
    */
   topNLabel: string
+  /**
+   * 对称柱状图方向
+   */
+  layout: 'horizontal' | 'vertical'
 }
 /**
  * 表头属性
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index 84c408f447..18a3b5da59 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -202,6 +202,23 @@ onMounted(() => {
       </el-checkbox>
     </el-form-item>
 
+    <el-form-item
+      :label="t('chart.orient')"
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-if="showProperty('layout')"
+    >
+      <el-radio-group
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.layout"
+        @change="changeBasicStyle('layout')"
+      >
+        <el-radio :effect="themes" label="horizontal">{{ t('chart.horizontal') }}</el-radio>
+        <el-radio :effect="themes" label="vertical">{{ t('chart.vertical') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
     <el-form-item
       class="form-item"
       v-if="showProperty('tableLayoutMode')"
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 bf4d61989e..330085e1af 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
@@ -58,7 +58,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
   ]
   propertyInner = {
     'background-overall-component': ['all'],
-    'basic-style-selector': ['colors', 'alpha', 'gradient'],
+    'basic-style-selector': ['colors', 'alpha', 'gradient', 'layout'],
     'x-axis-selector': ['color', 'fontSize', 'position', 'axisLabel', 'axisLine', 'splitLine'],
     'y-axis-selector': [
       'name',
@@ -149,13 +149,27 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
     if (basicStyle.gradient) {
       const color = basicStyle.colors?.map((ele, index) => {
         const tmp = hexColorToRGBA(ele, basicStyle.alpha)
-        return setGradientColor(tmp, true, 180 - index * 180)
+        let angle = 180 - index * 180
+        // 垂直固定角度
+        if (basicStyle.layout === 'vertical') {
+          if (index === 0) {
+            angle = 280
+          }
+          if (index === 1) {
+            angle = 90
+          }
+        }
+        return setGradientColor(tmp, true, angle)
       })
       options = {
         ...options,
         color
       }
     }
+    options = {
+      ...options,
+      layout: basicStyle.layout
+    }
     return options
   }
 
@@ -351,7 +365,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
         if (l.show) {
           label = {
             position: l.position,
-            layout: [{ type: 'limit-in-canvas' }],
+            layout: [{ type: 'fixed-overlap' }],
             style: {
               fill: l.color,
               fontSize: l.fontSize