diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 72a8dc2ce6..69889fad94 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1051,6 +1051,9 @@ export default {
     color_technology: 'Technology',
     color_simple: 'Simple',
     not_alpha: 'Opacity',
+    top_n_desc: 'Merge data into other',
+    top_n_input_1: 'Show Top',
+    top_n_input_2: ',the rest merged to other',
     area_border_color: 'Map border',
     area_base_color: 'Base map',
     size: 'Size',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 505617cab3..4ca73778db 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1051,6 +1051,9 @@ export default {
     color_technology: '科技',
     color_simple: '簡潔',
     not_alpha: '不透明度',
+    top_n_desc: '合併數據',
+    top_n_input_1: '顯示 Top',
+    top_n_input_2: ', 其餘合併至其他',
     area_border_color: '地圖邊線',
     area_base_color: '底圖',
     size: '大小',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 251068c9e4..47f81a2485 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1050,6 +1050,9 @@ export default {
     color_technology: '科技',
     color_simple: '简洁',
     not_alpha: '不透明度',
+    top_n_desc: '合并数据',
+    top_n_input_1: '显示 Top',
+    top_n_input_2: ', 其余合并至其他',
     area_border_color: '地图边线',
     area_base_color: '底图',
     size: '大小',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index ea570cd586..62f4aa90cc 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -40,7 +40,9 @@ export const DEFAULT_COLOR_CASE = {
   mapLineGradient: false,
   mapLineSourceColor: '#146C94',
   mapLineTargetColor: '#576CBC',
-  quotaSuffixColor: '#5470c6'
+  quotaSuffixColor: '#5470c6',
+  calcTopN: false,
+  topN: 5,
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -65,7 +67,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
   mapLineGradient: false,
   mapLineSourceColor: '#2F58CD',
   mapLineTargetColor: '#3795BD',
-  quotaSuffixColor: '#5470c6'
+  quotaSuffixColor: '#5470c6',
+  calcTopN: false,
+  topN: 5,
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
diff --git a/core/frontend/src/views/chart/chart/common/common.js b/core/frontend/src/views/chart/chart/common/common.js
index 8666942218..4d718bd783 100644
--- a/core/frontend/src/views/chart/chart/common/common.js
+++ b/core/frontend/src/views/chart/chart/common/common.js
@@ -3,6 +3,7 @@ import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } fro
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { $success } from '@/utils/message'
 import i18n from '@/lang'
+import { cloneDeep } from 'lodash'
 
 export function componentStyle(chart_option, chart) {
   let xAxisLabelFormatter = null
@@ -423,3 +424,29 @@ export const copyString = (content, notify) => {
     }
   })
 }
+
+export const configTopN = (data, chart) => {
+  if (!data?.length) {
+    return
+  }
+  const color = JSON.parse(chart.customAttr).color
+  if (!color.calcTopN || data.length <= color.topN) {
+    return
+  }
+  data.sort((a, b) => b.value - a.value)
+  const otherItems = data.splice(color.topN)
+  const initOtherItem = {
+    ...cloneDeep(data[0]),
+    name: i18n.t('datasource.other'),
+    value: 0,
+  }
+  otherItems.reduce((p, n) => {
+    p.value += n.value ?? 0
+    return p
+  }, initOtherItem)
+  data.push(initOtherItem)
+  data.forEach((item, i) => {
+    const curColor = color.colors[i % color.colors.length]
+    item.itemStyle.color = hexColorToRGBA(curColor, color.alpha)
+  })
+}
diff --git a/core/frontend/src/views/chart/chart/common/common_antv.js b/core/frontend/src/views/chart/chart/common/common_antv.js
index 354129bf9e..010a5a8f1a 100644
--- a/core/frontend/src/views/chart/chart/common/common_antv.js
+++ b/core/frontend/src/views/chart/chart/common/common_antv.js
@@ -2,6 +2,7 @@ import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
 import { equalsAny, includesAny } from '@/utils/StringUtils'
+import i18n from '@/lang'
 
 export function getPadding(chart) {
   if (chart.drill) {
@@ -1235,3 +1236,25 @@ export const TOOLTIP_TPL = '<li class="g2-tooltip-list-item" data-index={index}>
                                     '<span class="g2-tooltip-name">{name}</span>:' +
                                     '<span class="g2-tooltip-value">{value}</span>' +
                                   '</li>'
+export const configTopN = (data, chart) => {
+  if (!data?.length) {
+    return
+  }
+  const color = JSON.parse(chart.customAttr).color
+  if (!color.calcTopN || data.length <= color.topN) {
+    return
+  }
+  data.sort((a, b) => b.value - a.value)
+  const otherItems = data.splice(color.topN)
+  const initOtherItem = {
+    ...data[0],
+    field: i18n.t('datasource.other'),
+    name: i18n.t('datasource.other'),
+    value: 0,
+  }
+  otherItems.reduce((p, n) => {
+    p.value += n.value ?? 0
+    return p
+  }, initOtherItem)
+  data.push(initOtherItem)
+}
diff --git a/core/frontend/src/views/chart/chart/pie/pie.js b/core/frontend/src/views/chart/chart/pie/pie.js
index 80bb126866..43d7626f91 100644
--- a/core/frontend/src/views/chart/chart/pie/pie.js
+++ b/core/frontend/src/views/chart/chart/pie/pie.js
@@ -1,5 +1,5 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { componentStyle } from '../common/common'
+import { componentStyle, configTopN } from '../common/common'
 import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function basePieOption(chart_option, chart) {
@@ -50,6 +50,7 @@ export function basePieOption(chart_option, chart) {
         y.type = 'pie'
         chart_option.series[0].data.push(y)
       }
+      configTopN(chart_option.series[0].data, chart)
     }
   }
   componentStyle(chart_option, chart)
diff --git a/core/frontend/src/views/chart/chart/pie/pie_antv.js b/core/frontend/src/views/chart/chart/pie/pie_antv.js
index 83c57cddd5..339c007ac4 100644
--- a/core/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/core/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -9,6 +9,7 @@ import {
 
 import { Pie, Rose } from '@antv/g2plot'
 import { antVCustomColor } from '@/views/chart/chart/util'
+import { configTopN } from '@/views/chart/chart/common/common_antv'
 
 export function basePieOptionAntV(plot, container, chart, action) {
   // theme
@@ -82,7 +83,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
   }
   // custom color
   options.color = antVCustomColor(chart)
-
+  // topN
+  configTopN(data, chart)
   // 开始渲染
   if (plot) {
     plot.destroy()
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 3733348a98..cc3f5d5f63 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -1359,7 +1359,8 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'alpha'
+        'alpha',
+        'topN'
       ],
       'size-selector-ant-v': [
         'pieOuterRadius'
@@ -1418,7 +1419,8 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'alpha'
+        'alpha',
+        'topN'
       ],
       'size-selector-ant-v': [
         'pieInnerRadius',
@@ -2937,7 +2939,8 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
-        'alpha'
+        'alpha',
+        'topN'
       ],
       'size-selector': [
         'pieOuterRadius'
@@ -2995,7 +2998,8 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
-        'alpha'
+        'alpha',
+        'topN'
       ],
       'size-selector': [
         'pieInnerRadius',
diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index 615fe73872..bf2817d4aa 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -327,6 +327,31 @@
             @change="changeColorCase('alpha')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('topN')"
+          :label="$t('chart.top_n_desc')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="colorForm.calcTopN"
+            @change="changeColorCase('calcTopN')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('topN') && colorForm.calcTopN"
+          class="form-item top-n-item"
+        >
+          <span>{{ $t('chart.top_n_input_1') }}</span>
+          <el-input-number
+            v-model="colorForm.topN"
+            controls-position="right"
+            size="mini"
+            :min="1"
+            :step-strictly="true"
+            @change="changeColorCase('topN')"
+            />
+          <span>{{ $t('chart.top_n_input_2') }}</span>
+        </el-form-item>
         <el-form-item
           v-show="showProperty('mapLineGradient')"
           :label="$t('chart.gradient')"
@@ -612,7 +637,8 @@ export default {
           this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
           this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor
           this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor
-
+          this.colorForm.calcTopN = this.colorForm.calcTopN === undefined ? false : this.colorForm.calcTopN
+          this.colorForm.topN = this.colorForm.topN ?? DEFAULT_COLOR_CASE.topN
           this.initCustomColor()
         }
       }
@@ -672,7 +698,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .shape-item {
   padding: 6px;
   border: none;
@@ -752,4 +778,13 @@ span {
   padding: 4px 12px;
   border: 1px solid #e6e6e6;
 }
+.top-n-item {
+  ::v-deep .el-input-number {
+    width: 90px !important;
+    margin: 0 4px;
+  }
+  span {
+    font-size: 12px;
+  }
+}
 </style>