Merge pull request #10066 from dataease/pr@dev@feat_antv_treemap_label_dim_proportion

feat(视图): AntV 矩形树图标签支持显示维度和占比

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

@@ -1,12 +1,13 @@
 import {
   configPlotTooltipEvent,
-  getLabel,
   getLegend,
   getPadding,
   getTheme,
   getTooltip
 } from '@/views/chart/chart/common/common_antv'
 import { Treemap } from '@antv/g2plot'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import { parseJson } from '@/views/chart/chart/util'
 
 export function baseTreemapOptionAntV(container, chart, action) {
   // theme
@@ -57,3 +58,35 @@ export function baseTreemapOptionAntV(container, chart, action) {
   configPlotTooltipEvent(chart, plot)
   return plot
 }
+
+function getLabel(chart) {
+  const { label: labelAttr } = JSON.parse(chart.customAttr)
+  if (!labelAttr?.show) {
+    return false
+  }
+  const yAxis = parseJson(chart.yaxis)
+  const labelFormatter = yAxis?.[0].formatterCfg ?? formatterItem
+  return {
+    style: {
+      fill: labelAttr.color,
+      fontSize: labelAttr.fontSize
+    },
+    formatter: function(param) {
+      const labelContent = labelAttr.labelContent ?? ['quota']
+      const contentItems = []
+      if (labelContent.includes('dimension')) {
+        contentItems.push(param.field)
+      }
+      if (labelContent.includes('quota')) {
+        contentItems.push(valueFormatter(param.value, labelFormatter))
+      }
+      if (labelContent.includes('proportion')) {
+        const percentage = `${(((param.value / param.parent.value) * 10000) / 100).toFixed(
+          labelAttr.reserveDecimalCount
+        )}%`
+        contentItems.push(percentage)
+      }
+      return contentItems.join('\n')
+    }
+  }
+}

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

@@ -1819,7 +1819,9 @@ export const TYPE_CONFIGS = [
       'label-selector-ant-v': [
         'show',
         'fontSize',
-        'color'
+        'color',
+        'labelContent',
+        'reserveDecimalCount'
       ],
       'tooltip-selector-ant-v': [
         'show',

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

@@ -350,13 +350,6 @@ export default {
   },
   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' },
@@ -364,7 +357,11 @@ export default {
           { name: this.$t('chart.quota'), value: 'quota' }
         ]
       }
-      return []
+      return [
+        { name: this.$t('chart.dimension'), value: 'dimension' },
+        { name: this.$t('chart.quota'), value: 'quota' },
+        { name: this.$t('chart.proportion'), value: 'proportion' }
+      ]
     }
   },
   watch: {