fix(图表): 修复子弹图标签位置配置不生效的问题，以及优化子弹图方向配置对标签位置配置的显示问题

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

@@ -347,6 +347,9 @@ const isBarRangeTime = computed<boolean>(() => {
 })
 const showPositionH = computed(() => {
   if (showProperty('hPosition')) {
+    if (props.chart.type === 'bullet-graph') {
+      return props.chart.customAttr.basicStyle.layout === 'horizontal'
+    }
     if (props.chart.type !== 'bidirectional-bar') {
       return true
     }
@@ -356,6 +359,9 @@ const showPositionH = computed(() => {
 })
 const showPositionV = computed(() => {
   if (showProperty('vPosition')) {
+    if (props.chart.type === 'bullet-graph') {
+      return props.chart.customAttr.basicStyle.layout !== 'horizontal'
+    }
     if (props.chart.type !== 'bidirectional-bar' && props.chart.type !== 'bar-group') {
       return true
     }
@@ -363,38 +369,42 @@ const showPositionV = computed(() => {
   }
   return false
 })
+function initLayoutPosition() {
+  const layout = props.chart.customAttr.basicStyle.layout
+  const oldPosition = state?.labelForm?.position
+  if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') {
+    state.labelForm.position = 'middle'
+  }
+  if (layout === 'horizontal') {
+    if (state?.labelForm?.position === 'top') {
+      state.labelForm.position = 'right'
+    }
+    if (state?.labelForm?.position === 'bottom') {
+      state.labelForm.position = 'left'
+    }
+  } else {
+    if (state?.labelForm?.position === 'left') {
+      state.labelForm.position = 'bottom'
+    }
+    if (state?.labelForm?.position === 'right') {
+      state.labelForm.position = 'top'
+    }
+  }
+  if (oldPosition !== state.labelForm.position) {
+    changeLabelAttr('position')
+  }
+}
 function initBidirectionalBarPosition() {
   if (chartType.value === 'bidirectional-bar') {
-    const layout = props.chart.customAttr.basicStyle.layout
-    const oldPosition = state?.labelForm?.position
-    if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') {
-      state.labelForm.position = 'middle'
-    }
-    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'
-      }
-    }
-    if (oldPosition !== state.labelForm.position) {
-      changeLabelAttr('position')
-    }
+    initLayoutPosition()
   }
 }
 
 function initPosition() {
   if (chartType.value === 'bidirectional-bar') {
     initBidirectionalBarPosition()
+  } else if (chartType.value === 'bullet-graph') {
+    initLayoutPosition()
   } else {
     const oldPosition = state?.labelForm?.position
     if (showProperty('rPosition')) {
@@ -428,6 +438,9 @@ watch(
   () => props.chart.customAttr.basicStyle.layout,
   () => {
     initBidirectionalBarPosition()
+    if (chartType.value === 'bullet-graph') {
+      initLayoutPosition()
+    }
   },
   { deep: true }
 )

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

@@ -63,7 +63,21 @@ const emitMiscChange = (payload, prop?) => {
   })
 }
 
+const normalizeColor = color => {
+  if (Array.isArray(color)) {
+    return color[0] || predefineColors[0]
+  }
+  return typeof color === 'string' ? color : predefineColors[0]
+}
+
+const normalizeRangeFill = () => {
+  state.bulletRangeForm.bar.ranges.fill = normalizeColor(state.bulletRangeForm.bar.ranges.fill)
+}
+
 const changeStyle = (prop?) => {
+  if (state.bulletRangeForm.bar.ranges.showType === 'dynamic') {
+    normalizeRangeFill()
+  }
   if (state.bulletRangeForm.bar.ranges.showType === 'fixed' && state.rangeList.length) {
     state.bulletRangeForm.bar.ranges.fixedRange = cloneDeep(state.rangeList)
   }
@@ -121,6 +135,7 @@ const init = () => {
       customAttr = JSON.parse(chart.customAttr)
     }
     state.bulletRangeForm = defaultsDeep(customAttr.misc.bullet, cloneDeep(DEFAULT_MISC.bullet))
+    normalizeRangeFill()
     getRangeList()
   }
 }
@@ -129,6 +144,9 @@ const getRangeList = () => {
   const range = []
   if (state.bulletRangeForm.bar.ranges?.fixedRange?.length) {
     state.rangeList = state.bulletRangeForm.bar.ranges.fixedRange
+    state.rangeList.forEach(item => {
+      item.fill = normalizeColor(item.fill)
+    })
   } else {
     for (let i = 0; i < state.bulletRangeForm.bar.ranges.fixedRangeNumber; i++) {
       range.push({
@@ -143,6 +161,7 @@ const getRangeList = () => {
 
 const changeShowType = () => {
   if (state.bulletRangeForm.bar.ranges.showType === 'dynamic') {
+    normalizeRangeFill()
     changeStyle()
   } else {
     changeRangeItem()

core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts

@@ -61,7 +61,7 @@ export class BulletGraph extends G2ChartView<RuntimeOptions, G2Bullet> {
   ]
   propertyInner = {
     'basic-style-selector': ['radiusColumnBar', 'layout'],
-    'label-selector': ['hPosition', 'fontSize', 'color', 'labelFormatter'],
+    'label-selector': ['hPosition', 'vPosition', 'fontSize', 'color', 'labelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
     'x-axis-selector': [
       ...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'].filter(item => item != 'position'),
@@ -453,17 +453,15 @@ export class BulletGraph extends G2ChartView<RuntimeOptions, G2Bullet> {
     }
     const basicStyle = parseJson(chart.customAttr).basicStyle
     const { layout } = basicStyle
+    const labelPosition = getBulletLabelPosition(l.position, layout)
     const position = {
-      position: l.position === 'middle' ? 'inside' : l.position,
+      position: labelPosition,
       textAlign: 'left',
-      dy: 0,
+      dy: labelPosition === 'top' ? -10 : 0,
       dx: 0
     }
     if (layout !== 'horizontal') {
-      ;(position.position =
-        l.position === 'middle' ? 'inside' : l.position === 'left' ? 'bottom' : 'top'),
-        (position.textAlign = 'center')
-      position.dy = position.position === 'top' ? -10 : 0
+      position.textAlign = 'center'
     }
     // contrastReverse 标签颜色在图形背景上对比度低的情况下，从指定色板选择一个对比度最优的颜色
     // overlapDodgeY 对位置碰撞的标签在 y 方向上进行调整，防止标签重叠
@@ -481,9 +479,9 @@ export class BulletGraph extends G2ChartView<RuntimeOptions, G2Bullet> {
       formatter: d => valueFormatter(d, l.labelFormatter),
       ...(l.fullDisplay ? {} : transform)
     }
-    // 将标签配置应用到最后一个子元素（实际值）
-    options.children?.forEach((item, index) => {
-      if (index === options.children.length - 1) {
+    // 将标签配置应用到实际值条
+    options.children?.forEach(item => {
+      if (item.type === 'interval' && item.encode?.y === 'measures') {
         item.labels = [label]
       }
     })
@@ -833,3 +831,25 @@ function mergeBulletData(chart): any[] {
   })
   return result
 }
+
+function getBulletLabelPosition(position: string, layout: string): string {
+  if (position === 'middle') {
+    return 'inside'
+  }
+  if (layout === 'horizontal') {
+    if (position === 'top') {
+      return 'right'
+    }
+    if (position === 'bottom') {
+      return 'left'
+    }
+    return position
+  }
+  if (position === 'left') {
+    return 'bottom'
+  }
+  if (position === 'right') {
+    return 'top'
+  }
+  return position
+}