diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ae9fccca6d..12c4e8ee7f 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1097,6 +1097,7 @@ export default {
     table_item_bg: 'Table Background',
     table_header_font_color: 'Header Font',
     table_item_font_color: 'Table Font',
+    table_show_index: 'Show Index',
     stripe: 'Zebra pattern',
     start_angle: 'Start Angle',
     end_angle: 'End Angle',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 1b013c7bcf..fc97e2ecb4 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1097,6 +1097,7 @@ export default {
     table_item_bg: '表格背景',
     table_header_font_color: '表頭字體',
     table_item_font_color: '表格字體',
+    table_show_index: '顯示序號',
     stripe: '斑馬紋',
     start_angle: '起始角度',
     end_angle: '結束角度',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 1aba1c25c4..f7269ee81e 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1096,6 +1096,7 @@ export default {
     table_item_bg: '表格背景',
     table_header_font_color: '表头字体',
     table_item_font_color: '表格字体',
+    table_show_index: '显示序号',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index d7c580b0c6..8490dbf8c1 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -111,7 +111,9 @@ export const DEFAULT_SIZE = {
   liquidShape: 'circle',
   tablePageMode: 'page',
   symbolOpacity: 0.7,
-  symbolStrokeWidth: 2
+  symbolStrokeWidth: 2,
+  showIndex: false,
+  indexLabel: '序号'
 }
 export const DEFAULT_LABEL = {
   show: false,
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 4a2e5bf44e..6de4952283 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -20,7 +20,8 @@ export function getCustomTheme(chart) {
       cell: {
         backgroundColor: headerColor,
         horizontalBorderColor: borderColor,
-        verticalBorderColor: borderColor
+        verticalBorderColor: borderColor,
+        verticalBorderWidth: 0 //左上角顶点单元格左右边缘宽度要设置为 0，不然序号列的数字部分会比表头多几个像素，视觉上会突出去
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@@ -47,7 +48,8 @@ export function getCustomTheme(chart) {
       text: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
         fontSize: DEFAULT_SIZE.tableTitleFontSize,
-        textAlign: headerAlign
+        textAlign: headerAlign,
+        textBaseline: 'middle' // 行头字体绘制基线设置为中心，不然序号列的内容会靠上
       },
       bolderText: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@@ -125,9 +127,9 @@ export function getCustomTheme(chart) {
       theme.cornerCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.cornerCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
 
-      theme.rowCell.cell.backgroundColor = h_c
-      theme.rowCell.cell.horizontalBorderColor = b_c
-      theme.rowCell.cell.verticalBorderColor = b_c
+      theme.rowCell.cell.backgroundColor = i_c // 这个参数其实只对开启序号列的行头生效
+      theme.rowCell.cell.horizontalBorderColor = i_c
+      theme.rowCell.cell.verticalBorderColor = i_c
       theme.rowCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.rowCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.rowCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
@@ -159,12 +161,13 @@ export function getCustomTheme(chart) {
       theme.cornerCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
       theme.cornerCell.measureText.textAlign = h_a
 
+      // 序号列的数字单元格内容样式使用指标的内容样式而不是表头的内容样式
       theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.bolderText.textAlign = h_a
+      theme.rowCell.bolderText.textAlign = i_a
       theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.text.textAlign = h_a
+      theme.rowCell.text.textAlign = i_a
       theme.rowCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.measureText.textAlign = h_a
+      theme.rowCell.measureText.textAlign = i_a
 
       theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
       theme.colCell.bolderText.textAlign = h_a
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index 1a5e06c06f..5750be9793 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -118,14 +118,23 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
     data: tableData
   }
 
+  const customAttr = JSON.parse(chart.customAttr)
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    // showSeriesNumber: true
+    showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     conditions: getConditions(chart)
   }
+  //开启序号之后，第一列就是序号列，修改 label 即可
+  if (s2Options.showSeriesNumber) {
+    s2Options.colCell= (node) => {
+      if (node.colIndex === 0) {
+        node.label = customAttr.size.indexLabel
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {
@@ -245,14 +254,23 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
     data: tableData
   }
 
+  const customAttr = JSON.parse(chart.customAttr)
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    // showSeriesNumber: true
+    showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     conditions: getConditions(chart)
   }
+  //开启序号之后，第一列就是序号列，修改 label 即可
+  if (s2Options.showSeriesNumber) {
+    s2Options.colCell= (node) => {
+      if (node.colIndex === 0) {
+        node.label = customAttr.size.indexLabel
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 06aa6c2c29..266dc3d927 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -57,7 +57,9 @@ export const TYPE_CONFIGS = [
         'tableItemAlign',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnMode'
+        'tableColumnMode',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector-ant-v': [
         'show',
@@ -103,7 +105,9 @@ export const TYPE_CONFIGS = [
         'tableItemAlign',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnMode'
+        'tableColumnMode',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector-ant-v': [
         'show',
@@ -1670,7 +1674,9 @@ export const TYPE_CONFIGS = [
         'tableItemFontSize',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnWidth'
+        'tableColumnWidth',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector': [
         'show',
@@ -1709,7 +1715,9 @@ export const TYPE_CONFIGS = [
         'tableItemFontSize',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnWidth'
+        'tableColumnWidth',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector': [
         'show',
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index f69def9aa9..74668a1b1d 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -369,6 +369,33 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableShowIndex')"
+          label-width="100px"
+          :label="$t('chart.table_show_index')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.showIndex"
+            input-size="mini"
+            @change="changeBarSizeCase('tableShowIndex')"
+          >
+            <el-radio :label="true">{{$t('panel.yes')}}</el-radio>
+            <el-radio :label="false">{{$t('panel.no')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
+          label-width="100px"
+          class="form-item">
+          <el-input
+            v-model="sizeForm.indexLabel"
+            type="text"
+            @blur="changeBarSizeCase('tableIndexLabel')"
+          />
+        </el-form-item>
+
+
         <!--table-end-->
         <!--gauge-begin-->
         <el-form-item
@@ -1031,6 +1058,9 @@ export default {
           this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
 
+          this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
+          this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
+
           this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
           this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
           this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index fd12ccde71..ee063015df 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -358,6 +358,31 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableShowIndex')"
+          label-width="100px"
+          :label="$t('chart.table_show_index')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.showIndex"
+            input-size="mini"
+            @change="changeBarSizeCase('tableShowIndex')"
+          >
+            <el-radio :label="true">{{$t('panel.yes')}}</el-radio>
+            <el-radio :label="false">{{$t('panel.no')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
+          label-width="100px"
+          class="form-item">
+          <el-input
+            v-model="sizeForm.indexLabel"
+            type="text"
+            @blur="changeBarSizeCase('tableIndexLabel')"
+          />
+        </el-form-item>
 
         <!--chart-mix-start-->
         <span v-show="showProperty('mix')">
@@ -1197,6 +1222,9 @@ export default {
           this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
 
+          this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
+          this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
+
           this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
 
           this.sizeForm.gaugeMinType = this.sizeForm.gaugeMinType ? this.sizeForm.gaugeMinType : DEFAULT_SIZE.gaugeMinType
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 85a8772457..ba4826fccf 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -24,6 +24,9 @@
         :show-summary="showSummary"
         :summary-method="summaryMethod"
       >
+        <ux-table-column
+          type="index"
+          :title='indexLabel'/>
         <ux-table-column
           v-for="field in fields"
           :key="field.name"
@@ -136,7 +139,9 @@ export default {
       showPage: false,
       columnWidth: DEFAULT_SIZE.tableColumnWidth,
       scrollTimer: null,
-      scrollTop: 0
+      scrollTop: 0,
+      showIndex: false,
+      indexLabel: '序号'
     }
   },
   computed: {
@@ -278,6 +283,19 @@ export default {
           this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
           this.table_header_class.height = customAttr.size.tableTitleHeight + 'px'
           this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
+
+          // umy-ui 表格的序号列显隐不能通过双向绑定 visible 来切换，
+          // 需要获取 column ，然后将 column 的 visible 设置为 true/false 之后，调用 refreshColumn 来实现
+          const visibleColumn = this.$refs.plxTable.getTableColumn().fullColumn
+          for (let i = 0,column=visibleColumn[i]; i < visibleColumn.length; i++) {
+            // 有变更才刷新
+            if (column.type === 'index' && column.visible !== customAttr.size.showIndex) {
+              column.visible = customAttr.size.showIndex
+              this.$refs.plxTable.refreshColumn()
+              break;
+            }
+          }
+          this.indexLabel = customAttr.size.indexLabel
         }
         this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
         // 暂不支持斑马纹
@@ -328,13 +346,19 @@ export default {
     summaryMethod({ columns, data }) {
       const that = this
       const means = [] // 合计
+      const x = JSON.parse(that.chart.xaxis);
+      const customAttr = JSON.parse(that.chart.customAttr);
       columns.forEach((column, columnIndex) => {
-        const x = JSON.parse(that.chart.xaxis)
         if (columnIndex === 0 && x.length > 0) {
           means.push('合计')
         } else {
-          if (columnIndex >= x.length) {
-            const values = data.map(item => Number(item[column.property]))
+          // 显示序号就往后推一列
+          let requireSumIndex = x.length
+          if (customAttr.size.showIndex) {
+            requireSumIndex++
+          }
+          if (columnIndex >= requireSumIndex) {
+            const values = data.map(item => Number(item[column.property]));
             // 合计
             if (!values.every(value => isNaN(value))) {
               means[columnIndex] = values.reduce((prev, curr) => {
@@ -350,7 +374,7 @@ export default {
               means[columnIndex] = ''
             }
           } else {
-            means[columnIndex] = ''
+            means[columnIndex] = '';
           }
         }
       })
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index a69148f0e8..236fa547ff 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -40,7 +40,7 @@
           <el-collapse-item
             v-show="showPropertiesCollapse(['size-selector'])"
             name="size"
-            :title="$t('chart.size')"
+            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
           >
             <size-selector
               :param="param"