From 3f1d73fcdecbc19fa3b2183923d7492539037c21 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Thu, 29 Jan 2026 18:17:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=9C=86=E5=BD=A2?=
 =?UTF-8?q?=E5=A1=AB=E5=85=85=E5=9B=BE=E6=94=AF=E6=8C=81=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=8C=87=E6=A0=87=E5=92=8C=E5=8D=A0=E6=AF=94=20#17782?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-style/components/LabelSelector.vue    |  2 +-
 .../js/panel/charts/others/circle-packing.ts     | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 72ddc99d48..1ed851d5bc 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -292,7 +292,7 @@ const configCompat = (labelAttr: DeepPartial<ChartLabelAttr>) => {
   }
 }
 const checkLabelContent = contentProp => {
-  if (chartType.value === 'funnel' || chartType.value === 'liquid') {
+  if (['funnel', 'liquid', 'circle-packing'].includes(chartType.value)) {
     return false
   }
   const propIntersection = intersection(props.propertyInner, [
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/circle-packing.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/circle-packing.ts
index eceae28453..96ebc802a7 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/circle-packing.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/circle-packing.ts
@@ -47,7 +47,7 @@ export class CirclePacking extends G2PlotChartView<CirclePackingOptions, G2Circl
       'fontShadow'
     ],
     'function-cfg': ['emptyDataStrategy'],
-    'label-selector': ['color', 'fontSize'],
+    'label-selector': ['color', 'fontSize', 'showDimension', 'showQuota', 'showProportion'],
     'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
     'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'tooltipFormatter', 'show']
   }
@@ -176,9 +176,19 @@ export class CirclePacking extends G2PlotChartView<CirclePackingOptions, G2Circl
       ...tmpOptions.label,
       textAlign: 'center',
       offsetY: 5,
-      layout: labelAttr.fullDisplay ? [{ type: 'limit-in-plot' }] : tmpOptions.label.layout,
+      layout: labelAttr.fullDisplay ? [] : [{ type: 'limit-in-shape' }],
       formatter: (d: Datum) => {
-        return d.children.length === 0 ? d.name : ''
+        let showLabel = labelAttr.showDimension ? d.name : ''
+        if (labelAttr.showQuota) {
+          const quota = valueFormatter(d.value, labelAttr.quotaLabelFormatter)
+          showLabel += showLabel ? `\n${quota}` : quota
+        }
+        if (labelAttr.showProportion && d.depth > 0) {
+          const proportion = ((d.value || 1) / (d.parent?.value || 1)) * 100
+          const percent = `${proportion.toFixed(labelAttr.reserveDecimalCount ?? 2)}%`
+          showLabel += showLabel ? `\n${percent}` : percent
+        }
+        return d.children.length === 0 ? showLabel : ''
       }
     }
     return {