Merge pull request #10141 from dataease/pr@dev-v2@chart-bidirectional-style

style(图表-对称条形图): 垂直方向时轴线的显示样式优化

core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue

@@ -101,6 +101,7 @@ onMounted(() => {
         :themes="themes"
         type="left"
         :chart-type="chart.type"
+        :layout="chart.customAttr.basicStyle.layout"
         @on-change-y-axis-form="changeAxisStyle"
       />
     </el-tab-pane>
@@ -120,6 +121,7 @@ onMounted(() => {
         :themes="themes"
         type="right"
         :chart-type="chart.type"
+        :layout="chart.customAttr.basicStyle.layout"
         @on-change-y-axis-form="changeSubAxisStyle"
       />
     </el-tab-pane>

core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue

@@ -14,6 +14,7 @@ const props = withDefaults(
     propertyInner?: Array<string>
     type?: 'left' | 'right'
     chartType?: string
+    layout?: string
   }>(),
   {
     themes: 'dark',
@@ -75,6 +76,14 @@ const init = () => {
 
 const showProperty = prop => props.propertyInner?.includes(prop)
 
+const isBidirectionalBar = computed(() => {
+  return props.chartType === 'bidirectional-bar'
+})
+
+const isVerticalLayout = computed(() => {
+  return props.layout === 'vertical'
+})
+
 onMounted(() => {
   init()
 })
@@ -99,9 +108,19 @@ onMounted(() => {
         size="small"
         @change="changeAxisStyle('position')"
       >
-        <div v-if="chartType === 'bidirectional-bar'">
+        <div v-if="isBidirectionalBar">
-          <el-radio :effect="props.themes" label="right">{{ t('chart.text_pos_top') }}</el-radio>
+          <div v-if="isVerticalLayout">
-          <el-radio :effect="props.themes" label="left">{{ t('chart.text_pos_bottom') }}</el-radio>
+            <el-radio :effect="props.themes" label="left">{{ t('chart.text_pos_left') }}</el-radio>
+            <el-radio :effect="props.themes" label="right">{{
+              t('chart.text_pos_right')
+            }}</el-radio>
+          </div>
+          <div v-else>
+            <el-radio :effect="props.themes" label="right">{{ t('chart.text_pos_top') }}</el-radio>
+            <el-radio :effect="props.themes" label="left">{{
+              t('chart.text_pos_bottom')
+            }}</el-radio>
+          </div>
         </div>
         <div v-else>
           <el-radio :effect="props.themes" label="left">{{ t('chart.text_pos_left') }}</el-radio>

core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue

@@ -100,6 +100,14 @@ const init = () => {
 
 const showProperty = prop => props.propertyInner?.includes(prop)
 
+const isBidirectionalBar = computed(() => {
+  return props.chart.type === 'bidirectional-bar'
+})
+
+const isHorizontalLayout = computed(() => {
+  return props.chart.customAttr.basicStyle.layout === 'horizontal'
+})
+
 onMounted(() => {
   init()
 })
@@ -124,8 +132,10 @@ onMounted(() => {
         size="small"
         @change="changeAxisStyle('position')"
       >
-        <div v-if="chart.type === 'bidirectional-bar'">
+        <div v-if="isBidirectionalBar">
-          <el-radio :effect="props.themes" label="top">{{ t('chart.text_pos_left') }}</el-radio>
+          <el-radio :effect="props.themes" label="top">{{
+            isHorizontalLayout ? t('chart.text_pos_left') : t('chart.text_pos_top')
+          }}</el-radio>
           <el-radio :effect="props.themes" label="bottom">{{
             t('chart.text_pos_center')
           }}</el-radio>

core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts

@@ -325,8 +325,9 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
         valueExt: undefined
       }
     }
+    const layoutHorizontal = options.layout === 'horizontal'
     // 处理横轴标题方向不对
-    if (yAxis && yAxis['title']) {
+    if (yAxis && yAxis['title'] && layoutHorizontal) {
       yAxis['title'].autoRotate = false
     }
     const yAxisTmp = parseJson(chart.customStyle).yAxis