fix(图表): 修复饼图和环形图“其他”数据无法联动跳转 #17771

core/core-frontend/src/locales/en.ts

@@ -2132,7 +2132,9 @@ export default {
     enable_slider_tip: 'After enabling the slider, the carousel prompt will be disabled.',
     liquid_show_border: 'Show Border',
     liquid_border_width: 'Border Width',
-    liquid_border_distance: 'Border Distance'
+    liquid_border_distance: 'Border Distance',
+    top_n_label_tip:
+      'Do not duplicate the data value of the sector label field, otherwise it will cause display abnormalities.'
   },
   dataset: {
     field_value: 'Field Value',

core/core-frontend/src/locales/tw.ts

@@ -2073,7 +2073,8 @@ export default {
     enable_slider_tip: '開啟縮略軸後，輪播提示將會失效',
     liquid_show_border: '顯示邊框',
     liquid_border_width: '邊框寬度',
-    liquid_border_distance: '邊框間距'
+    liquid_border_distance: '邊框間距',
+    top_n_label_tip: '請勿與扇區標籤欄位的數據值重複，否則會導致顯示異常。'
   },
   dataset: {
     field_value: '欄位值',

core/core-frontend/src/locales/zh-CN.ts

@@ -2079,7 +2079,8 @@ export default {
     enable_slider_tip: '开启缩略轴后，轮播提示将会失效',
     liquid_show_border: '显示边框',
     liquid_border_width: '边框宽度',
-    liquid_border_distance: '边框间距'
+    liquid_border_distance: '边框间距',
+    top_n_label_tip: '请勿和扇区标签字段数据值重复，否则会导致显示异常'
   },
   dataset: {
     field_value: '字段值',

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -1440,7 +1440,6 @@ onMounted(async () => {
       <el-form-item
         class="form-item"
         :class="'form-item-' + themes"
-        :label="t('chart.top_n_label')"
         v-show="state.basicStyleForm.calcTopN"
       >
         <el-input
@@ -1450,6 +1449,19 @@ onMounted(async () => {
           :maxlength="50"
           @change="changeBasicStyle('topNLabel')"
         />
+        <template #label>
+          <div style="display: flex; align-items: center">
+            <span style="margin-right: 4px">{{ $t('chart.top_n_label') }}</span>
+            <el-tooltip effect="dark" placement="bottom">
+              <template #content>
+                <div>{{ t('chart.top_n_label_tip') }}</div>
+              </template>
+              <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </template>
       </el-form-item>
     </div>
     <div class="alpha-setting" v-if="showProperty('innerRadius')">

core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts

@@ -133,7 +133,10 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
     const { Pie: G2Pie } = await import('@antv/g2plot/esm/plots/pie')
     const newChart = new G2Pie(container, options)
     newChart.on('interval:click', d => {
-      d.data?.data?.field !== customAttr.basicStyle.topNLabel && action(d)
+      if (customAttr.basicStyle.calcTopN && d.data?.data?.others) {
+        return
+      }
+      action(d)
     })
     configPlotTooltipEvent(chart, newChart)
     return newChart
@@ -279,7 +282,8 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
         dynamicTooltipValue: [],
         field: basicStyle.topNLabel,
         name: basicStyle.topNLabel,
-        value: 0
+        value: 0,
+        others: true
       }
       const dynamicTotalMap: Record<string, number> = {}
       otherItems.reduce((p, n) => {