diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 13a469c9..0486b70a 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -190,6 +190,12 @@
         :entity="entity"
         @toggleLoading="toggleLoading"
     ></entity-detail-tabs-chart>
+    <entity-detail-map
+        v-else-if="chart.type === typeMapping.entityDetail.map"
+        :chart="chart"
+        :entity="entity"
+        @toggleLoading="toggleLoading"
+    ></entity-detail-map>
   </div>
 </template>
 
@@ -225,6 +231,7 @@ import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLi
 import EntityDetailSubscriberKpi from '@/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi'
 import EntityDetailSubscriberTopApp from '@/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp'
 import EntityDetailTabsChart from '@/views/charts2/charts/entityDetail/EntityDetailTabs'
+import EntityDetailMap from '@/views/charts2/charts/entityDetail/EntityDetailMap'
 
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
@@ -262,7 +269,8 @@ export default {
     EntityDetailSubscriberKpi,
     EntityDetailSubscriberTopApp,
     EntityDetailLine,
-    EntityDetailTabsChart
+    EntityDetailTabsChart,
+    EntityDetailMap
   },
   props: {
     chart: Object,
diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js
index fa4dca57..375ff568 100644
--- a/src/views/charts2/chart-tools.js
+++ b/src/views/charts2/chart-tools.js
@@ -37,6 +37,7 @@ export const typeMapping = {
     subscriberKpi: 714,
     subscriberTopApp: 715,
     line: 107,
-    tabsChart: 713
+    tabsChart: 713,
+    map: 3
   }
 }
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
new file mode 100644
index 00000000..8e462e91
--- /dev/null
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script>
+import chartMixin from '@/views/charts2/chart-mixin'
+
+export default {
+  name: 'EntityDetailMap',
+  mixins: [chartMixin],
+}
+</script>
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index 7291893e..4d1f0171 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -36,17 +36,17 @@
       <div class="single-value__circle">
         <div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
         <span v-if="index ===0 || index ===1 || index ===2">
-          P95:&nbsp;{{ valueToRangeValue(npm.P95, unitTypes.time).join(' ') }}</span>
+          P95: {{ valueToRangeValue(npm.P95, unitTypes.time).join(' ') }}</span>
           <span v-else>
-          P95:&nbsp;{{ valueToRangeValue(npm.P95, unitTypes.percent).join(' ') }}
+          P95: {{ valueToRangeValue(npm.P95, unitTypes.percent).join(' ') }}
         </span>
         </div>
         <div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
         <span v-if="index ===0 || index ===1 || index ===2">
-          P99:&nbsp;{{ valueToRangeValue(npm.P99, unitTypes.time).join(' ') }}
+          P99: {{ valueToRangeValue(npm.P99, unitTypes.time).join(' ') }}
         </span>
           <span v-else>
-          P99:&nbsp;{{ valueToRangeValue(npm.P99, unitTypes.percent).join(' ') }}
+          P99: {{ valueToRangeValue(npm.P99, unitTypes.percent).join(' ') }}
         </span>
         </div>
       </div>
diff --git a/test/views/charts2/charts/entityDetail/EntityDetailLine.test.js b/test/views/charts2/charts/entityDetail/EntityDetailLine.test.js
index fac5b9f8..4fdc6eb8 100644
--- a/test/views/charts2/charts/entityDetail/EntityDetailLine.test.js
+++ b/test/views/charts2/charts/entityDetail/EntityDetailLine.test.js
@@ -102,9 +102,9 @@ describe('views/charts2/charts/entityDetail/EntityDetailLine.vue测试', () => {
       expect(titleNode0.text()).toEqual('network.total')
       expect(titleNode1.text()).toEqual('network.outbound')
       expect(titleNode2.text()).toEqual('network.other')
-      expect(textNode0.text()).toEqual('<0.01bps')
-      expect(textNode1.text()).toEqual('95.23Ebps')
-      expect(textNode2.text()).toEqual('0.01bps')
+      expect(textNode0.text()).toEqual('<0.01metric.bps')
+      expect(textNode1.text()).toEqual('95.23Emetric.bps')
+      expect(textNode2.text()).toEqual('0.01metric.bps')
       resolve()
     }, 200))
   })
@@ -132,9 +132,9 @@ describe('views/charts2/charts/entityDetail/EntityDetailLine.vue测试', () => {
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
       const textNode1 = await wrapper.get('[test-id="tabContent1"]')
       const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-      expect(textNode0.text()).toEqual('112.04Mbps')
-      expect(textNode1.text()).toEqual('18.59Mbps')
-      expect(textNode2.text()).toEqual('87.56Mbps')
+      expect(textNode0.text()).toEqual('112.04Mmetric.bps')
+      expect(textNode1.text()).toEqual('18.59Mmetric.bps')
+      expect(textNode2.text()).toEqual('87.56Mmetric.bps')
       resolve()
     }, 200))
 
@@ -168,9 +168,9 @@ describe('views/charts2/charts/entityDetail/EntityDetailLine.vue测试', () => {
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
       const textNode1 = await wrapper.get('[test-id="tabContent1"]')
       const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-      expect(textNode0.text()).toEqual('14.06Kpackets/s')
-      expect(textNode1.text()).toEqual('4.24Kpackets/s')
-      expect(textNode2.text()).toEqual('9.17Kpackets/s')
+      expect(textNode0.text()).toEqual('14.06Kmetric.packets')
+      expect(textNode1.text()).toEqual('4.24Kmetric.packets')
+      expect(textNode2.text()).toEqual('9.17Kmetric.packets')
       resolve()
     }, 200))
   })
@@ -197,7 +197,7 @@ describe('views/charts2/charts/entityDetail/EntityDetailLine.vue测试', () => {
 
     await new Promise(resolve => setTimeout(async () => {
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
-      expect(textNode0.text()).toEqual('29.89sessions/s')
+      expect(textNode0.text()).toEqual('29.89metric.sessions')
       resolve()
     }, 200))
   })
diff --git a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
index ceae6233..9e342f54 100644
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
@@ -76,9 +76,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
       expect(titleNode0.text()).toEqual('network.total')
       expect(titleNode1.text()).toEqual('network.outbound')
       expect(titleNode2.text()).toEqual('network.other')
-      expect(textNode0.text()).toEqual('<0.01bps')
-      expect(textNode1.text()).toEqual('95.23Ebps')
-      expect(textNode2.text()).toEqual('0.01bps')
+      expect(textNode0.text()).toEqual('<0.01metric.bps')
+      expect(textNode1.text()).toEqual('95.23Emetric.bps')
+      expect(textNode2.text()).toEqual('0.01metric.bps')
       resolve()
     }, 200))
   })
@@ -105,9 +105,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
       const textNode1 = await wrapper.get('[test-id="tabContent1"]')
       const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-      expect(textNode0.text()).toEqual('112.04Mbps')
-      expect(textNode1.text()).toEqual('18.59Mbps')
-      expect(textNode2.text()).toEqual('87.56Mbps')
+      expect(textNode0.text()).toEqual('112.04Mmetric.bps')
+      expect(textNode1.text()).toEqual('18.59Mmetric.bps')
+      expect(textNode2.text()).toEqual('87.56Mmetric.bps')
       resolve()
     }, 200))
 
@@ -139,9 +139,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
       const textNode1 = await wrapper.get('[test-id="tabContent1"]')
       const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-      expect(textNode0.text()).toEqual('14.06Kpackets/s')
-      expect(textNode1.text()).toEqual('4.24Kpackets/s')
-      expect(textNode2.text()).toEqual('9.17Kpackets/s')
+      expect(textNode0.text()).toEqual('14.06Kmetric.packets')
+      expect(textNode1.text()).toEqual('4.24Kmetric.packets')
+      expect(textNode2.text()).toEqual('9.17Kmetric.packets')
       resolve()
     }, 200))
   })
@@ -166,7 +166,7 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
 
     await new Promise(resolve => setTimeout(async () => {
       const textNode0 = await wrapper.get('[test-id="tabContent0"]')
-      expect(textNode0.text()).toEqual('29.89sessions/s')
+      expect(textNode0.text()).toEqual('29.89metric.sessions')
       resolve()
     }, 200))
   })
diff --git a/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js b/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js
index d078532e..5a39d6dc 100644
--- a/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js
+++ b/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js
@@ -117,11 +117,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
       const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
 
-      expect(p95Node0.text()).toEqual('P95:445 ms')
-      expect(p95Node1.text()).toEqual('P95:2.95 s')
-      expect(p95Node2.text()).toEqual('P95:<1 ms')
-      expect(p95Node3.text()).toEqual('P95:3.46 %')
-      expect(p95Node4.text()).toEqual('P95:10.47 %')
+      expect(p95Node0.text()).toEqual('P95: 445 ms')
+      expect(p95Node1.text()).toEqual('P95: 2.95 s')
+      expect(p95Node2.text()).toEqual('P95: <1 ms')
+      expect(p95Node3.text()).toEqual('P95: 3.46 %')
+      expect(p95Node4.text()).toEqual('P95: 10.47 %')
 
       const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
       const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
@@ -129,11 +129,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
       const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
 
-      expect(p99Node0.text()).toEqual('P99:601 ms')
-      expect(p99Node1.text()).toEqual('P99:4.62 s')
-      expect(p99Node2.text()).toEqual('P99:<1 ms')
-      expect(p99Node3.text()).toEqual('P99:13.72 %')
-      expect(p99Node4.text()).toEqual('P99:18.30 %')
+      expect(p99Node0.text()).toEqual('P99: 601 ms')
+      expect(p99Node1.text()).toEqual('P99: 4.62 s')
+      expect(p99Node2.text()).toEqual('P99: <1 ms')
+      expect(p99Node3.text()).toEqual('P99: 13.72 %')
+      expect(p99Node4.text()).toEqual('P99: 18.30 %')
       resolve()
     }, 400))
   })
@@ -193,11 +193,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
       const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
 
-      expect(p95Node0.text()).toEqual('P95:160 ms')
-      expect(p95Node1.text()).toEqual('P95:266 ms')
-      expect(p95Node2.text()).toEqual('P95:<1 ms')
-      expect(p95Node3.text()).toEqual('P95:2.23 %')
-      expect(p95Node4.text()).toEqual('P95:6.60 %')
+      expect(p95Node0.text()).toEqual('P95: 160 ms')
+      expect(p95Node1.text()).toEqual('P95: 266 ms')
+      expect(p95Node2.text()).toEqual('P95: <1 ms')
+      expect(p95Node3.text()).toEqual('P95: 2.23 %')
+      expect(p95Node4.text()).toEqual('P95: 6.60 %')
 
       const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
       const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
@@ -205,11 +205,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
       const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
 
-      expect(p99Node0.text()).toEqual('P99:789 ms')
-      expect(p99Node1.text()).toEqual('P99:2.09 s')
-      expect(p99Node2.text()).toEqual('P99:<1 ms')
-      expect(p99Node3.text()).toEqual('P99:21.87 %')
-      expect(p99Node4.text()).toEqual('P99:9.26 %')
+      expect(p99Node0.text()).toEqual('P99: 789 ms')
+      expect(p99Node1.text()).toEqual('P99: 2.09 s')
+      expect(p99Node2.text()).toEqual('P99: <1 ms')
+      expect(p99Node3.text()).toEqual('P99: 21.87 %')
+      expect(p99Node4.text()).toEqual('P99: 9.26 %')
       resolve()
     }, 300))
   })
@@ -235,11 +235,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
       const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
 
-      expect(p95Node0.text()).toEqual('P95:-')
-      expect(p95Node1.text()).toEqual('P95:-')
-      expect(p95Node2.text()).toEqual('P95:-')
-      expect(p95Node3.text()).toEqual('P95:-')
-      expect(p95Node4.text()).toEqual('P95:-')
+      expect(p95Node0.text()).toEqual('P95: -')
+      expect(p95Node1.text()).toEqual('P95: -')
+      expect(p95Node2.text()).toEqual('P95: -')
+      expect(p95Node3.text()).toEqual('P95: -')
+      expect(p95Node4.text()).toEqual('P95: -')
 
       const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
       const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
@@ -247,11 +247,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
       const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
 
-      expect(p99Node0.text()).toEqual('P99:-')
-      expect(p99Node1.text()).toEqual('P99:-')
-      expect(p99Node2.text()).toEqual('P99:-')
-      expect(p99Node3.text()).toEqual('P99:-')
-      expect(p99Node4.text()).toEqual('P99:-')
+      expect(p99Node0.text()).toEqual('P99: -')
+      expect(p99Node1.text()).toEqual('P99: -')
+      expect(p99Node2.text()).toEqual('P99: -')
+      expect(p99Node3.text()).toEqual('P99: -')
+      expect(p99Node4.text()).toEqual('P99: -')
       resolve()
     }, 500))
   })
@@ -277,11 +277,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
       const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
 
-      expect(p95Node0.text()).toEqual('P95:-')
-      expect(p95Node1.text()).toEqual('P95:-')
-      expect(p95Node2.text()).toEqual('P95:-')
-      expect(p95Node3.text()).toEqual('P95:-')
-      expect(p95Node4.text()).toEqual('P95:-')
+      expect(p95Node0.text()).toEqual('P95: -')
+      expect(p95Node1.text()).toEqual('P95: -')
+      expect(p95Node2.text()).toEqual('P95: -')
+      expect(p95Node3.text()).toEqual('P95: -')
+      expect(p95Node4.text()).toEqual('P95: -')
 
       const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
       const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
@@ -289,11 +289,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
       const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
 
-      expect(p99Node0.text()).toEqual('P99:-')
-      expect(p99Node1.text()).toEqual('P99:-')
-      expect(p99Node2.text()).toEqual('P99:-')
-      expect(p99Node3.text()).toEqual('P99:-')
-      expect(p99Node4.text()).toEqual('P99:-')
+      expect(p99Node0.text()).toEqual('P99: -')
+      expect(p99Node1.text()).toEqual('P99: -')
+      expect(p99Node2.text()).toEqual('P99: -')
+      expect(p99Node3.text()).toEqual('P99: -')
+      expect(p99Node4.text()).toEqual('P99: -')
       resolve()
     }, 300))
   })
@@ -341,11 +341,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
       const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
 
-      expect(p95Node0.text()).toEqual('P95:<1 ms')
-      expect(p95Node1.text()).toEqual('P95:4.92 m')
-      expect(p95Node2.text()).toEqual('P95:10.00 s')
-      expect(p95Node3.text()).toEqual('P95:3.46 %')
-      expect(p95Node4.text()).toEqual('P95:10.47 %')
+      expect(p95Node0.text()).toEqual('P95: <1 ms')
+      expect(p95Node1.text()).toEqual('P95: 4.92 m')
+      expect(p95Node2.text()).toEqual('P95: 10.00 s')
+      expect(p95Node3.text()).toEqual('P95: 3.46 %')
+      expect(p95Node4.text()).toEqual('P95: 10.47 %')
 
       const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
       const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
@@ -353,11 +353,11 @@ describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
       const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
       const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
 
-      expect(p99Node0.text()).toEqual('P99:<1 ms')
-      expect(p99Node1.text()).toEqual('P99:7.70 m')
-      expect(p99Node2.text()).toEqual('P99:10.00 s')
-      expect(p99Node3.text()).toEqual('P99:13.72 %')
-      expect(p99Node4.text()).toEqual('P99:18.30 %')
+      expect(p99Node0.text()).toEqual('P99: <1 ms')
+      expect(p99Node1.text()).toEqual('P99: 7.70 m')
+      expect(p99Node2.text()).toEqual('P99: 10.00 s')
+      expect(p99Node3.text()).toEqual('P99: 13.72 %')
+      expect(p99Node4.text()).toEqual('P99: 18.30 %')
       resolve()
     }, 500))
   })