Merge pull request #10091 from dataease/pr@dev-v2@chart-bidirectional-bar-style-fix

fix(图表-对称条形图): 修复标签显示位置错误及无法调整样式的问题

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

@@ -220,7 +220,37 @@ const isBarRangeTime = computed<boolean>(() => {
   }
   return false
 })
+watch(
+  () => props.chart.customAttr.basicStyle.layout,
+  () => {
+    const layout = props.chart.customAttr.basicStyle.layout
+    if (layout === 'horizontal') {
+      if (state?.labelForm?.position === 'top') {
+        state.labelForm.position = 'right'
+      }
+      if (state?.labelForm?.position === 'bottom') {
+        state.labelForm.position = 'left'
+      }
+    }
+    if (layout === 'vertical') {
+      if (state?.labelForm?.position === 'left') {
+        state.labelForm.position = 'bottom'
+      }
+      if (state?.labelForm?.position === 'right') {
+        state.labelForm.position = 'top'
+      }
+    }
+    changeLabelAttr('position')
+  },
+  { deep: true }
+)
 
+const isBarBidirectionalAndVertical = computed(() => {
+  if (props.chart.type !== 'bidirectional-bar') {
+    return true
+  }
+  return props.chart.customAttr.basicStyle.layout === 'vertical'
+})
 onMounted(() => {
   init()
 })
@@ -298,7 +328,7 @@ onMounted(() => {
       </el-select>
     </el-form-item>
     <el-form-item
-      v-if="showProperty('hPosition')"
+      v-if="showProperty('hPosition') && !isBarBidirectionalAndVertical"
       :label="t('chart.label_position')"
       class="form-item"
       :class="'form-item-' + themes"
@@ -319,7 +349,7 @@ onMounted(() => {
       </el-select>
     </el-form-item>
     <el-form-item
-      v-if="showProperty('vPosition')"
+      v-if="showProperty('vPosition') && isBarBidirectionalAndVertical"
       :label="t('chart.label_position')"
       class="form-item"
       :class="'form-item-' + themes"

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

@@ -87,7 +87,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
     ],
     'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
     'function-cfg': ['emptyDataStrategy'],
-    'label-selector': ['hPosition', 'seriesLabelFormatter'],
+    'label-selector': ['hPosition', 'vPosition', 'seriesLabelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show']
   }
 
@@ -386,6 +386,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       ...chart.customAttr.label,
       position: 'right'
     }
+    chart.customAttr.basicStyle.layout = 'horizontal'
     return chart
   }
 
@@ -399,6 +400,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       return pre
     }, {})
     let customAttr: DeepPartial<ChartAttr>
+    const layoutHorizontal = options.layout === 'horizontal'
     if (chart.customAttr) {
       customAttr = parseJson(chart.customAttr)
       // label
@@ -434,7 +436,33 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
               } else {
                 res = valueFormatter(value, l.labelFormatter)
               }
-              return res
+              const group = new G2PlotChartView.engine.Group({})
+              const isValue = param['series-field-key'] === 'value'
+              const textAlign = isValue && layoutHorizontal ? 'end' : 'start'
+              const isMiddle = label.position === 'middle'
+              group.addShape({
+                type: 'text',
+                attrs: {
+                  x:
+                    isValue && layoutHorizontal && !isMiddle
+                      ? -6
+                      : !isValue && layoutHorizontal && !isMiddle
+                      ? 6
+                      : 0,
+                  y:
+                    isValue && !layoutHorizontal && !isMiddle
+                      ? -8
+                      : !isValue && !layoutHorizontal && !isMiddle
+                      ? 8
+                      : 0,
+                  text: res,
+                  textAlign: label.position === 'middle' ? 'start' : textAlign,
+                  textBaseline: 'top',
+                  fontSize: labelCfg.fontSize,
+                  fill: labelCfg.color
+                }
+              })
+              return group
             }
           }
         } else {
@@ -442,6 +470,14 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
         }
       }
     }
+    if (!layoutHorizontal) {
+      if (label.position === 'left') {
+        label.position = 'bottom'
+      }
+      if (label.position === 'right') {
+        label.position = 'top'
+      }
+    }
     return { ...options, label }
   }