diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 847a2740..c46774e8 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -38,6 +38,7 @@
 @import './views/charts/chartEchartAppRelateDomain';
 @import './views/charts/ChartOneSituationStatistics';
 @import './views/charts/ChartTwoSituationStatistics';
+@import './views/charts/chartMap';
 
 
 //@import '../chart';
diff --git a/src/assets/css/components/views/charts/chartMap.scss b/src/assets/css/components/views/charts/chartMap.scss
new file mode 100644
index 00000000..98e71c3b
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartMap.scss
@@ -0,0 +1,60 @@
+.cn-chart__map {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .map-drawing {
+    flex: 1;
+  }
+  .map-chart__legends {
+    flex-basis: 116px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 30px;
+
+    .map-chart__legend {
+      padding-bottom: 5px;
+      flex-grow: 0;
+      flex-shrink: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #E0E6EF;
+      border-left-color: transparent;
+      border-right-color: transparent;;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-left-color: #E0E6EF;
+      }
+      &:last-of-type {
+        border-right-color: #E0E6EF;
+      }
+      &.map-chart__legend--active {
+        border-color: #59ABFF;
+
+        .legend__value {
+          color: #1890FF;
+        }
+      }
+      .legend__circle-marker {
+        flex: 0 0 12px;
+        margin: 12px 0 8px 0;
+        width: 12px;
+        border-radius: 50%;
+      }
+      .legend__value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+      }
+      .legend__name {
+        padding: 0 10px;
+        color: #666666;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 693e3ff9..294518fb 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -130,7 +130,19 @@ export const unitTypes = {
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartActiveIpTableOrderOptions = ['machine'] // active ip table类型图表的order 选项
-// table类型图表的TOP-N选项
+// table类型图表column映射
+export const chartTableColumnMapping = {
+  sessions: 'overall.sessions',
+  packets: 'overall.packets',
+  bytes: 'overall.bytes',
+  clientIp: 'overall.clientIp',
+  serverIp: 'overall.serverIp',
+  domain: 'overall.domain',
+  appName: 'overall.appName',
+  queryRate: 'dns.queryRate',
+  dnsLatency: 'dns.averageResolveLatency',
+  responseFailRate: 'dns.responseFailureRate'
+}
 export const chartPieTableTopOptions = [
   { name: 'Sessions', value: 'sessions' },
   { name: 'Packets', value: 'packets' },
diff --git a/src/utils/date-util.js b/src/utils/date-util.js
index 62dac86b..85c6c3f5 100644
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -29,7 +29,7 @@ export function getMillisecond (time) {
       ms = Math.floor(time * (10 ** (0 - difference)))
     }
   }
-  return ms
+  return ms ? Number(ms) : null
 }
 // 初始化日期
 export function getNowTime (interval) {
diff --git a/src/utils/tools.js b/src/utils/tools.js
index adb545ed..8427d3f9 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -444,12 +444,18 @@ export function lineToHump (name) {
 }
 // 下划线转换空格首位大写
 export function lineToSpace (name) {
+  if (_.isEmpty(name)) {
+    return ''
+  }
   return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) {
     return ` ${letter.toUpperCase()}`
   }))
 }
 // 驼峰转换下划线
 export function humpToLine (name) {
+  if (_.isEmpty(name)) {
+    return ''
+  }
   return name.replace(/([A-Z])/g, '_$1').toLowerCase()
 }
 // 搜索功能：对象转字符串
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 9a585195..f299f370 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -16,6 +16,7 @@
         :chart-data="chartData"
         :query-params="queryParams"
         :entity="entity"
+        @query="query"
         @showLoading="showLoading"
       ></chart-map>
 
@@ -79,7 +80,7 @@
       ></chart-ip-open-port-bar>
 
       <chart-table
-        v-else-if="isTable && isCurrentTable"
+        v-else-if="isTable && isBasicTable"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :table="table"
@@ -231,7 +232,7 @@ import {
   isEchartsLine,
   isSingleValue,
   isTable,
-  isCurrentTable,
+  isBasicTable,
   isActiveIpTable,
   isTitle,
   isMap,
@@ -344,6 +345,9 @@ export default {
         this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
           `chart${this.chartInfo.id}`
         )
+    },
+    query (params) {
+      this.$emit('query', params)
     }
   },
   watch: {
@@ -369,7 +373,7 @@ export default {
       ),
       isRelationShip: isRelationShip(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
-      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isBasicTable: isBasicTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
       isMap: isMap(props.chartInfo.type),
       isTitle: isTitle(props.chartInfo.type),
diff --git a/src/views/charts/ChartHeader.vue b/src/views/charts/ChartHeader.vue
index e299c896..3c0258b9 100644
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -11,8 +11,8 @@
       </span>
       {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
     </div>
-    <div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}" :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
-    <template v-if="isCurrentTable">
+    <div class="chart-header__title" v-else-if="!isBasicTable" :class="{'chart-header__title--block': isBlock}" :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
+    <template v-if="isBasicTable">
       <div class="chart-header__title">
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
         <span
@@ -50,8 +50,8 @@
               popper-class="option-popper"
               @change="tableLimitChange"
           >
-            <template v-for="(item, index) in table.tableColumns" :key="item.prop">
-              <el-option v-if="index > 0" :value="item.prop">{{item.prop}}</el-option>
+            <template v-for="(item, index) in table.tableColumns.order" :key="item.prop">
+              <el-option :label="$t(chartTableColumnMapping[item])" :value="item"></el-option>
             </template>
           </el-select>
         </div>
@@ -96,7 +96,7 @@
     </template>
 
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable && !isEchartsWithTable">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isBasicTable && !isActiveIpTable && !isEchartsWithTable">
       <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
         <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
         <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -114,11 +114,11 @@
 </template>
 
 <script>
-import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup, isEchartsWithTable } from './charts/tools'
+import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isBasicTable, isGroup, isEchartsWithTable } from './charts/tools'
 import ChartError from '@/views/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions } from '@/utils/constants'
+import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions, chartTableColumnMapping } from '@/utils/constants'
 
 export default {
   name: 'ChartHeader',
@@ -140,6 +140,7 @@ export default {
   },
   data () {
     return {
+      chartTableColumnMapping,
       dropdownMenuShow: false,
       errorText: '',
 
@@ -226,7 +227,7 @@ export default {
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
-      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isBasicTable: isBasicTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
       isGroup: isGroup(props.chartInfo.type)
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index 9e55529d..df479fef 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -37,6 +37,7 @@
         :table="table"
         :is-fullscreen="isFullscreen"
         :order-pie-table="orderPieTable"
+        @query="(params) => getChartData(null, params)"
         @showLoading="showLoading"
     ></chart>
   </div>
@@ -145,14 +146,6 @@ export default {
             num: 345
           }
         ] // table的所有数据
-      },
-      table: {
-        pageSize: chartTableDefaultPageSize,
-        limit: chartTableTopOptions[0], // top-n
-        orderBy: 'sessions',
-        tableColumns: [], // table字段
-        tableData: [], // table的所有数据
-        currentPageData: [] // table当前页的数据
       }
     }
   },
@@ -189,10 +182,10 @@ export default {
           ...this.entity,
           ...extraParams
         }
-        // 默认参数特殊处理
         const requestUrl = url || (chartParams && chartParams.url)
+        // 默认参数特殊处理
         if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
-          this.queryParams.dnsServerRole = dnsServerRole.RTDNS
+          this.queryParams.dnsServerRole = extraParams.dnsServerRole || dnsServerRole.RTDNS
         }
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
@@ -207,13 +200,13 @@ export default {
                 data: {
                   result: [
                     {
-                      dnsServerRole: 'TLDNS',
+                      dnsServerRole: extraParams.dnsServerRole || dnsServerRole.RTDNS,
                       ipLocationCountry: 'China',
                       ipLocationId: 'CN',
                       count: 161
                     },
                     {
-                      dnsServerRole: 'RTDNS',
+                      dnsServerRole: extraParams.dnsServerRole || dnsServerRole.RTDNS,
                       ipLocationCountry: 'Japan',
                       ipLocationId: 'JP',
                       count: 222
@@ -231,9 +224,6 @@ export default {
                 })
               }
               this.chartData = response.data.result
-              this.table.tableData = response.data.result
-              this.table.tableColumns = this.getTableTitle(response.data.result)
-              this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
               this.resultType = response.data.resultType
               if (this.chartInfo.type === 12) {
                 const newArr = []
@@ -252,7 +242,12 @@ export default {
                   }
                 })
               }
-              if (this.isSingleValue) {
+              if (this.isTable) {
+                this.table.tableData = response.data.result
+                // this.table.tableColumns = chartParams.columns
+                // this.table.tableColumns = this.getTableTitle(response.data.result)
+                this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
+              } else if (this.isSingleValue) {
                 if (chartParams && chartParams.dataKey) {
                   if (response.data.result && (response.data.result[chartParams.dataKey] || response.data.result[chartParams.dataKey] === 0)) {
                     this.chartData = response.data.result[chartParams.dataKey]
@@ -395,7 +390,19 @@ export default {
     const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    let table = {}
+    if (isTable(props.chartInfo.type)) {
+      table = {
+        pageSize: chartTableDefaultPageSize,
+        limit: chartTableTopOptions[0], // top-n
+        orderBy: props.chartInfo.params.columns.order[0],
+        tableColumns: props.chartInfo.params.columns, // table字段
+        tableData: [], // table的所有数据
+        currentPageData: [] // table当前页的数据
+      }
+    }
     return {
+      table,
       chartTimeFilter,
       isEcharts: isEcharts(props.chartInfo.type),
       isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
diff --git a/src/views/charts/charts/ChartActiveIpTable.vue b/src/views/charts/charts/ChartActiveIpTable.vue
index 7123d8eb..c853e838 100644
--- a/src/views/charts/charts/ChartActiveIpTable.vue
+++ b/src/views/charts/charts/ChartActiveIpTable.vue
@@ -28,18 +28,18 @@
             v-for="(c, i) in table.tableColumns"
             show-overflow-tooltip
             :key="i"
-            :label="c.label"
-            :prop="c.prop"
+            :label="$t(chartTableOrderOptionsMapping[c])"
+            :prop="c"
         >
           <template #default="{ row }">
-            <span v-if="c.prop === 'bytes'">
-                {{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
+            <span v-if="c === 'bytes'">
+                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
             </span>
-            <span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
-                {{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
+            <span v-else-if="c === 'packets' || c === 'sessions'">
+                {{unitConvert(row[c], unitTypes.number).join(' ')}}
             </span>
             <span v-else>
-                {{row[c.prop]}}
+                {{row[c]}}
             </span>
           </template>
         </el-table-column>
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, chartTableOrderOptionsMapping } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 export default {
   name: 'ChartActiveIpTable',
@@ -61,6 +61,7 @@ export default {
   },
   data () {
     return {
+      chartTableOrderOptionsMapping,
       unitConvert,
       unitTypes,
       activeIpTable: {
diff --git a/src/views/charts/charts/ChartTable.vue b/src/views/charts/charts/ChartTable.vue
index 76744ba6..3bed0d48 100644
--- a/src/views/charts/charts/ChartTable.vue
+++ b/src/views/charts/charts/ChartTable.vue
@@ -9,22 +9,30 @@
         <el-table-column v-if="table.currentPageData.length" type="index" label="#">
         </el-table-column>
         <el-table-column
-            v-for="(c, i) in table.tableColumns"
+            v-for="(c, i) in table.tableColumns.common"
             show-overflow-tooltip
             :key="i"
-            :label="c.label"
-            :prop="c.prop"
+            :label="$t(chartTableColumnMapping[c])"
+            :prop="c"
         >
-          <template #header>{{$t(c.label)}}</template>
+        </el-table-column>
+        <el-table-column
+            v-for="(c, i) in table.tableColumns.order"
+            show-overflow-tooltip
+            :key="i"
+            :label="$t(chartTableColumnMapping[c])"
+            :prop="c"
+        >
+          <template #header>{{$t(chartTableColumnMapping[c])}}</template>
           <template #default="{ row }">
-            <span v-if="c.prop === 'bytes'">
-                {{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
+            <span v-if="c === 'bytes'">
+                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
             </span>
-            <span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
-                {{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
+            <span v-else-if="c === 'packets' || c === 'sessions'">
+                {{unitConvert(row[c], unitTypes.number).join(' ')}}
             </span>
             <span v-else>
-                {{row[c.prop]}}
+                {{row[c]}}
             </span>
           </template>
         </el-table-column>
@@ -41,7 +49,7 @@
 </template>
 
 <script>
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, chartTableColumnMapping } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
 export default {
@@ -57,6 +65,7 @@ export default {
   },
   data () {
     return {
+      chartTableColumnMapping,
       unitConvert,
       unitTypes
     }
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index ffbc1ca1..f3743d7a 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -107,8 +107,8 @@ export function isEchartsWithTable (type) {
 export function isTable (type) {
   return type >= 61 && type <= 70
 }
-/* current table */
-export function isCurrentTable (type) {
+/* basic table */
+export function isBasicTable (type) {
   return type === 61
 }
 /* table */