feat(视图): AntV 堆叠柱状图支持显示总计标签 #9210

core/frontend/src/views/chart/chart/bar/bar_antv.js

@@ -15,7 +15,8 @@ import {
   configAxisLabelLengthLimit
 } from '@/views/chart/chart/common/common_antv'
 import { antVCustomColor, getColors, handleEmptyDataStrategy, hexColorToRGBA, handleStackSort } from '@/views/chart/chart/util'
-import { cloneDeep, find } from 'lodash-es'
+import { cloneDeep, find, groupBy, each } from 'lodash-es'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 
 export function baseBarOptionAntV(container, chart, action, isGroup, isStack) {
   // theme
@@ -141,6 +142,22 @@ export function baseBarOptionAntV(container, chart, action, isGroup, isStack) {
       }
     })
   }
+  // total label
+  if (chart.type === 'bar-stack' && customAttr.label.showTotal) {
+    const yAxis = JSON.parse(chart.yaxis)
+    const formatterCfg = yAxis?.[0]?.formatterCfg ?? formatterItem
+    each(groupBy(data, 'field'), (values, key) => {
+      const total = values.reduce((a, b) => a + b.value, 0)
+      const value = valueFormatter(total, formatterCfg)
+      analyse.push({
+        type: 'text',
+        position: [key, total],
+        content: `${value}`,
+        style: { textAlign: 'center', fontSize: customAttr.label.totalFontSize, fill: customAttr.label.totalColor },
+        offsetY: -(parseInt(customAttr.label.totalFontSize) / 2)
+      })
+    })
+  }
   // 目前只有百分比堆叠柱状图需要这个属性，先直接在这边判断而不作为参数传过来
   options.isPercent = chart.type === 'percentage-bar-stack'
   // custom color

core/frontend/src/views/chart/chart/chart.js

@@ -222,7 +222,10 @@ export const DEFAULT_LABEL = {
   reserveDecimalCount: 2,
   labelContent: ['dimension', 'proportion'],
   showConversion: false,
-  conversionLabel: '转换率'
+  conversionLabel: '转换率',
+  showTotal: false,
+  totalFontSize: '12',
+  totalColor: '#909399'
 }
 export const DEFAULT_TOOLTIP = {
   show: true,

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

@@ -836,7 +836,10 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-v'
+        'position-v',
+        'showTotal',
+        'totalColor',
+        'totalFontSize'
       ],
       'tooltip-selector-ant-v': [
         'show',

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

@@ -150,6 +150,50 @@
             />
           </el-form-item>
         </div>
+        <el-divider v-show="showProperty('showTotal')"/>
+        <el-form-item
+          v-show="showProperty('showTotal')"
+          :label="$t('chart.show_summary')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.showTotal"
+            @change="changeLabelAttr('showTotal')"
+          />
+        </el-form-item>
+        <div v-show="labelForm.showTotal">
+          <el-form-item
+            v-show="showProperty('totalFontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.totalFontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLabelAttr('totalFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('totalColor')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.totalColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('totalColor')"
+            />
+          </el-form-item>
+        </div>
         <el-form-item
           v-show="showProperty('conversion')"
           :label="$t('chart.show_conversion')"
@@ -404,6 +448,8 @@ export default {
           if (!this.labelForm.labelContent) {
             this.labelForm.labelContent = ['quota']
           }
+          this.labelForm.totalFontSize = this.labelForm.totalFontSize ?? DEFAULT_LABEL.totalFontSize
+          this.labelForm.totalColor = this.labelForm.totalColor ?? DEFAULT_LABEL.totalColor
         }
       }
     },
@@ -492,4 +538,7 @@ export default {
     cursor: pointer;
     z-index: 1003;
   }
+.el-divider--horizontal {
+  margin: 10px 0
+}
 </style>