From 70864c9899ffe13b404dd91ca530ed3026975691 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Tue, 4 Jun 2024 11:31:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20AntV=20=E7=9F=A9?=
 =?UTF-8?q?=E5=BD=A2=E6=A0=91=E5=9B=BE=E6=A0=87=E7=AD=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=BB=B4=E5=BA=A6=E5=92=8C=E5=8D=A0=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/chart/treemap/treemap_antv.js | 35 ++++++++++++++++++-
 core/frontend/src/views/chart/chart/util.js   |  4 ++-
 .../shapeAttr/LabelSelectorAntV.vue           | 13 +++----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js
index 91ef3ea58d..16cd60c631 100644
--- a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js
+++ b/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')
+    }
+  }
+}
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 1b7dcd1700..5a3fecfd66 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/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',
diff --git a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
index c8aea7c09c..12ba2a716e 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
+++ b/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: {