diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 268f9a745..90a146ef5 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -115,6 +115,14 @@
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
       ></chart-endpoint-info>
+      <chart-table
+        :ref="'chart' + chartInfo.id"
+        v-if="isTable(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
+      ></chart-table>
       <chart-group
         :ref="'chart' + chartInfo.id"
         v-if="isGroup(chartInfo.type)"
@@ -150,7 +158,7 @@ import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagon from './chart/chartHexagon'
 import chartMap from './chart/chartMap'
-import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutoCarousel, isMap, isAssetInfo, isEndpointInfo } from './chart/tools'
+import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutoCarousel, isMap, isAssetInfo, isEndpointInfo, isTable } from './chart/tools'
 import lodash from 'lodash'
 
 export default {
@@ -214,6 +222,7 @@ export default {
     isAssetInfo,
     isEndpointInfo,
     isMap,
+    isTable,
     resize () {
       console.log(this.$refs['chart' + this.chartInfo.id])
       this.$refs['chart' + this.chartInfo.id].resize()
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index e49062193..326f0c63a 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -1,10 +1,112 @@
 <template>
-
+  <div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
+    <el-table
+      ref="dataTable"
+      :data="tableData"
+      :height="'100%'"
+      border
+      @sort-change="tableDataSort"
+    >
+      <el-table-column
+        v-for="(col, index) in columns"
+        :key="`col-${index}`"
+        :min-width="100"
+        :sort-orders="['ascending', 'descending']"
+        class="data-column"
+        sortable
+      >
+        <template slot="header">
+          <span class="data-column__span">{{col.title}}</span>
+        </template>
+        <template slot-scope="scope" :column="col">
+          {{scope.row.values}}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
+import { getMetricTypeValue } from '@/components/common/js/tools'
+import chartDataFormat from '@/components/charts/chartDataFormat'
+
 export default {
-  name: 'chart-table'
+  name: 'chart-table',
+  mixins: [chartMixin, chartFormat],
+  data () {
+    return {
+      tableData: [],
+      columns: []
+    }
+  },
+  methods: {
+    initChart () {
+      console.log(this.chartInfo, this.chartData)
+      this.columns = this.chartInfo.param.columns
+      const data = this.initTableData(this.chartInfo, this.chartData)
+      const arr = []
+      console.log(data)
+      Object.keys(data).forEach(key => {
+        Object.keys(data[key]).forEach(keys => {
+          console.log(data[key][keys])
+          arr.push(data[key][keys])
+        })
+      })
+      this.tableData = arr
+      this.$refs.dataTable.doLayout()
+      console.log(data)
+    },
+    initTableData (chartInfo, originalDatas) {
+      let colorIndex = 0
+      const returnData = {}
+      const arr = chartInfo.param.indexs.split(',')
+      console.log(returnData)
+      originalDatas.forEach((originalData, expressionIndex) => {
+        const key = chartInfo.elements[expressionIndex].name || expressionIndex
+        originalData.forEach((data, dataIndex) => {
+          data.$labels = data.metric
+          const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+          const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
+          const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
+          data.values = value
+          data.showValue = showValue
+          data.mapping = mapping
+          data.keys = ''
+          // eslint-disable-next-line vue/no-mutating-props
+          arr.forEach((item) => {
+            if (item && data.$labels[item]) {
+              data.keys += item + ':' + data.$labels[item]
+            }
+          })
+          if (!data.keys) {
+            Object.keys(data.$labels).forEach(key => {
+              data.keys += key + ':' + data.$labels[key]
+            })
+          }
+          if (data.keys && !returnData[data.keys]) {
+            returnData[data.keys] = {}
+            returnData[data.keys][key] = data
+          }
+          if (data.keys && !returnData[data.keys][key]) {
+            returnData[data.keys][key] = data
+          }
+          colorIndex++
+        })
+      })
+      return returnData
+    },
+    selectTableMapping () {
+
+    },
+    tableDataSort (orderBy) {
+
+    },
+  },
+  mounted () {
+    this.initChart()
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js
index b61ac7d1e..3b87e3343 100644
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/nezha-fronted/src/components/chart/chart/tools.js
@@ -94,7 +94,9 @@ export function isEndpointInfo (type) {
 export function isMap (type) {
   return type === chartType.map
 }
-
+export function isTable (type) {
+  return type === chartType.table
+}
 export function getGroupHeight (arr) {
   if (arr.length) {
     let lastItem = []
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 3bb8c6ecb..771dce0e7 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -153,7 +153,6 @@ export default {
               })
             }
             if (this.chartInfo.type === 'diagram') {
-              this.chartInfo.type = 'map'
               this.chartData = [this.chartInfo.param.topo]
               if (!this.chartInfo.param.topo || !this.chartInfo.param.topo.pens.length){
                 this.chartData = []
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 4d6eddc74..a8cd74bf7 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -830,6 +830,16 @@ export function getMetricTypeValue (queryItem, type) {
       const total = eval(copy.join('+'))
       return total
     }
+    case 'range': {
+      const min = copy.sort((x, y) => { return parseFloat(x[1]) - parseFloat(y[1]) })[0][1]
+      const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
+      return max - min
+    }
+    case 'different': {
+      const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
+      const first = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[copy.length - 1][1]
+      return last - first
+    }
   }
 }
 
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index b5291ab26..db139d1dd 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -163,7 +163,7 @@
           prop="param.index"
         >
           <vue-tags-input
-            v-model="chartConfig.param.indexs"
+            v-model="tag"
             :maxlength="32"
             :placeholder="$t('overall.addParameter')"
             :tags="chartConfig.param.tags"
@@ -579,7 +579,7 @@
       <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
         <div class="form__sub-title">
-          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+          <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
         <div v-for="(item,index) in chartConfig.param.columns" :key="index">
           <div class="chart-title chart-title-config">
@@ -680,6 +680,7 @@ export default {
       rules: {
       },
       oldType: '',
+      tag: '',
       promqlType: 'log',
       chartTypeList: [
         {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 979cbf053..9f0931f62 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -171,6 +171,7 @@ export default {
         }
         delete params.panel
         if (params.type === 'table') {
+          console.log(params.param.tags)
           delete params.param.tags
         }
         if (params.id) { // 修改
@@ -271,12 +272,12 @@ export default {
           unit: 2,
           type: 'stat',
           param: {
-            refer: 1,
+            refer: 0,
             system: '',
             systemGroup: '',
             systemSelect: '',
             sort: 'desc',
-            limit: undefined,
+            limit: 100,
             nullType: 'null',
             statistics: 'last',
             valueMapping: {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 85127af00..9c5f7c384 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -392,7 +392,10 @@ export default {
       this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
     },
     tagsChange (newTags) {
-      // this.chartConfig.param.indexs = newTags.map(item => item.text)
+      console.log(newTags, newTags)
+      this.chartConfig.param.tags = newTags
+      this.chartConfig.param.indexs = newTags.map(item => item.text).join(',')
+      this.change()
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 17d577ac9..b3161a517 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -124,6 +124,21 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <!-- index -->
+        <el-form-item
+          v-show="isTable(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.tableIndex')"
+          class="form-item--half-width"
+          prop="param.index"
+        >
+          <vue-tags-input
+            v-model="tag"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
       </div>
       <div class="form-items--half-width-group">
         <!--width-->
@@ -324,11 +339,11 @@
       <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
         <div class="form__sub-title">
-          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+          <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
         <div v-for="(item,index) in chartConfig.param.columns" :key="index">
           <div class="chart-title chart-title-config">
-                <span class="endpoint-title-content">
+                <span class="chart-title-content">
                   <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
                   <span v-show="!item.show" class="title-content-left">
                     <span>
@@ -353,7 +368,7 @@
               <div>
                 <div class='mapping-display'>Title</div>
               </div>
-              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
+              <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
                 <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
               </el-form-item>
               <div>
@@ -372,7 +387,7 @@
               <div>
                 <div class='mapping-display'>Display</div>
               </div>
-              <el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+              <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                 <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change"/>
               </el-form-item>
             </el-row>
@@ -404,6 +419,7 @@ export default {
       groupList: [],
       selectList: [],
       oldType: '',
+      tag: '',
       chartTypeList: [
         {
           id: 'stat',
@@ -478,17 +494,34 @@ export default {
           if (this.oldType !== 'table') {
             break
           }
-          this.chartConfig.param.valueMapping = {
-            show: true,
-            mapping: []
+          this.chartConfig.param = {
+            refer: 1,
+            system: '',
+            systemGroup: '',
+            systemSelect: '',
+            sort: 'desc',
+            limit: 100,
+            nullType: 'null',
+            statistics: 'last',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
           }
-          this.chartConfig.param.refer = 0
-          delete this.chartConfig.param.columns
           break
         case 'table':
-          this.chartConfig.param.columns = []
-          this.chartConfig.param.refer = 0
-          delete this.chartConfig.param.valueMapping
+          this.chartConfig.param = {
+            refer: 1,
+            system: '',
+            systemGroup: '',
+            systemSelect: '',
+            indexs: '',
+            sort: 'desc',
+            limit: 100,
+            nullType: 'null',
+            statistics: 'last',
+            columns: []
+          }
           break
       }
       this.oldType = type
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index b9db70b96..f23646b22 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -416,7 +416,13 @@ export default {
               this.chart.groupId = ''
             }
             if (this.chart.type == 'table') {
-              this.chart.param.tags = this.chart.param.indexs ? this.chart.param.indexs.split(',') : []
+              const arr = this.chart.param.indexs ? this.chart.param.indexs.split(',') : []
+              this.chart.param.tags = arr.map((item) => {
+                return {
+                  text: item,
+                  tiClasses: ['ti-valid']
+                }
+              })
             }
           } else {
             this.$message.error(res.msg)