feat(视图-分组堆叠柱状图): 分组堆叠柱状图标签支持定义展示内容

https://www.tapd.cn/55578866/prong/stories/view/1155578866001011383

frontend/src/views/chart/chart/common/common_antv.js

@@ -200,13 +200,31 @@ export function getLabel(chart) {
                 f.formatterCfg.thousandSeparator = false
               }
               res = valueFormatter(param.value, f.formatterCfg)
-            } else if (equalsAny(chart.type, 'bar-group', 'bar-group-stack')) {
+            } else if (equalsAny(chart.type, 'bar-group')) {
               const f = yAxis[0]
               if (f.formatterCfg) {
                 res = valueFormatter(param.value, f.formatterCfg)
               } else {
                 res = valueFormatter(param.value, formatterItem)
               }
+            } else if (equalsAny(chart.type, 'bar-group-stack')) {
+              const f = yAxis[0]
+              let formatterCfg = formatterItem
+              if (f.formatterCfg) {
+                formatterCfg = f.formatterCfg
+              }
+              const labelContent = l.labelContent ?? ['quota']
+              const contentItems = []
+              if (labelContent.includes('group')) {
+                contentItems.push(param.group)
+              }
+              if (labelContent.includes('stack')) {
+                contentItems.push(param.category)
+              }
+              if (labelContent.includes('quota')) {
+                contentItems.push(valueFormatter(param.value, formatterCfg))
+              }
+              res = contentItems.join('\n')
             } else {
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
@@ -363,7 +381,14 @@ export function getTooltip(chart) {
               if (chart.type === 'bar-group') {
                 obj = { name: param.category, value: param.value }
               } else {
-                obj = { name: param.group, value: param.value }
+                let name = ''
+                if (param.group) {
+                  name = param.name + '-'
+                }
+                if (param.category) {
+                  name += param.category
+                }
+                obj = { name: name, value: param.value }
               }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]

frontend/src/views/chart/chart/util.js

@@ -886,7 +886,8 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-v'
+        'position-v',
+        'labelContent'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -3553,3 +3554,13 @@ export function resetRgbOpacity(sourceColor, times) {
   }
   return sourceColor
 }
+
+export function getDefaultLabelContent(chart) {
+  if (chart?.type?.includes('pie')) {
+    return ['dimension', 'proportion']
+  }
+  if (chart?.type?.includes('bar')) {
+    return ['quota']
+  }
+  return []
+}

frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue

@@ -314,11 +314,6 @@ export default {
         { name: this.$t('chart.reserve_zero'), value: 0 },
         { name: this.$t('chart.reserve_one'), value: 1 },
         { name: this.$t('chart.reserve_two'), value: 2 }
-      ],
-      labelContentOptions: [
-        { name: this.$t('chart.dimension'), value: 'dimension' },
-        { name: this.$t('chart.quota'), value: 'quota' },
-        { name: this.$t('chart.proportion'), value: 'proportion' }
       ]
     }
   },
@@ -403,6 +398,25 @@ export default {
     showProperty(property) {
       return this.propertyInner.includes(property)
     }
+  },
+  computed: {
+    labelContentOptions() {
+      if (this.chart.type.includes('pie')) {
+        return [
+          { name: this.$t('chart.dimension'), value: 'dimension' },
+          { name: this.$t('chart.quota'), value: 'quota' },
+          { name: this.$t('chart.proportion'), value: 'proportion' }
+        ]
+      }
+      if (this.chart.type.includes('bar')) {
+        return [
+          { name: this.$t('chart.chart_group'), value: 'group' },
+          { name: this.$t('chart.stack_item'), value: 'stack' },
+          { name: this.$t('chart.quota'), value: 'quota' }
+        ]
+      }
+      return []
+    }
   }
 }
 </script>

frontend/src/views/chart/group/Group.vue

@@ -513,6 +513,7 @@ import {
 } from '../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { adaptCurTheme } from '@/components/canvas/utils/style'
+import { getDefaultLabelContent } from '@/views/chart/chart/util'
 
 export default {
   name: 'Group',
@@ -1060,6 +1061,7 @@ export default {
         if (type === 'pie-donut-rose') {
           attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.5)
         }
+        attr.label.labelContent = getDefaultLabelContent(view)
       } else if (type.includes('line')) {
         attr.label.position = 'top'
       } else if (type.includes('treemap')) {

frontend/src/views/chart/view/ChartEdit.vue

@@ -1748,6 +1748,7 @@ import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
 import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
+import { getDefaultLabelContent } from '@/views/chart/chart/util'
 
 export default {
   name: 'ChartEdit',
@@ -3313,6 +3314,7 @@ export default {
           this.view.customAttr.label.position = 'middle'
         }
       }
+      customAttr.label.labelContent = getDefaultLabelContent(this.view)
       // reset custom colors
       this.view.customAttr.color.seriesColors = []
     },