diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue
index e08623fe..573f993b 100644
--- a/src/components/charts/ChartMap.vue
+++ b/src/components/charts/ChartMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cn-chart cn-chart__map">
+  <div class="cn-chart__map">
     <div class="cn-chart__header chart-header-position" >
       <slot name="chartErrorInfo"></slot>
       <div class="header__title" v-if="!hideHeader">
diff --git a/src/utils/api.js b/src/utils/api.js
index bd22518f..b7787f8a 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -56,6 +56,8 @@ export const api = {
   // ip detail
   entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic',
   entityIpDetailTrafficMap: '/interface/entity/detail/ip/trafficMap',
+  entityDomainDetailTrafficMap: '/interface/entity/detail/domain/trafficMap',
+  entityAppDetailTrafficMap: '/interface/entity/detail/app/trafficMap',
   entityIpDetailRelation: '/interface/entity/detail/overview/ip/relation',
   entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert',
   entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security'
diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue
index c2786244..0302037d 100644
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -141,7 +141,7 @@ export default {
     }
   },
   methods: {
-    chartSingleValueTotal() {
+    chartSingleValueTotal () {
       const chartParams = this.$_.get(this.chartInfo, 'params') || {}
       if (this.type === 52) {
         const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -150,7 +150,7 @@ export default {
         get(replaceUrlPlaceholder(chartParams.urlChart)).then(response => {
           const seriesTemplate = this.chartOption.series[0]
           const result = [{
-            "legend": "app",
+            'legend': 'app',
             "aggregation": {
               "max": 1,
               "last": 1,
@@ -191,10 +191,10 @@ export default {
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => this.timer = setTimeout(() => {this.chartSingleValueTotal()}))
+  mounted () {
+    this.$nextTick(() => this.timer = setTimeout(() => { this.chartSingleValueTotal() }))
   },
-  deactivated() {
+  deactivated () {
     clearTimeout(this.timer)
   }
 }
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index 5e1fa765..f21bfa84 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -104,12 +104,14 @@
     </div>
   </div>
   <div class="overview-map">
-    <chart
-        :chart="chart"
+    <chart2
+        :chart-info="chart"
+        :chart-data="chartData"
         :entity="entityCopy"
+        :query-params="getQueryParams"
         :hide-header="true"
         @getCurrentTimeRange="getCurrentTimeRange"
-    ></chart>
+    ></chart2>
   </div>
 </template>
 
@@ -118,14 +120,15 @@ import { api } from '@/utils/api'
 import entityDetailMixin from './entityDetailMixin'
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import Chart from '@/views/charts/Chart'
+import Chart2 from '@/views/charts/Chart2'
 import _ from 'lodash'
+import {get} from "@/utils/http";
 
 export default {
   name: 'App',
   mixins: [entityDetailMixin],
   components: {
-    Chart
+    Chart2
   },
   data () {
     return {
@@ -135,6 +138,8 @@ export default {
       relationUrl: api.entityAppDetailRelation,
       alertUrl: api.entityAppDetailAlert,
       securityUrl: api.entityAppDetailSecurity,
+      trafficUrlMap: api.entityAppDetailTrafficMap,
+      chartData: null,
       listMode: 'list'
     }
   },
@@ -150,8 +155,18 @@ export default {
     handleRelationData (result) {
       this.entityData.domainCount = result.domainCount
       this.entityData.ipCount = result.ipCount
+    },
+    chartGetMap () {
+      get((this.trafficUrlMap), this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.chartData = response.data.result
+        }
+      })
     }
   },
+  mounted() {
+    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 200)})
+  },
   setup (props) {
     return {
       chart: {
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index 444b8030..a98b5d1b 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -75,76 +75,11 @@
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content">
       <div class="overview__row">
-        <single-value
-            :type="51"
-            icon="cn-icon cn-icon-time"
-            class="cn-chart__single-value--detail-overview"
-            :loading="false"
-            style="width: 180px;"
-        >
-          <template #title>
-            <span>{{$t('entities.avgRoundTripTime')}}</span>
-          </template>
-          <template #data>
-            <span>{{entityData.establishLatency ? unitConvert(entityData.establishLatency, unitTypes.time).join(' ') : '-'}}</span>
-          </template>
-        </single-value>
-        <single-value
-            :type="51"
-            icon="cn-icon cn-icon-http"
-            class="cn-chart__single-value--detail-overview"
-            :loading="false"
-            style="width: 180px;"
-        >
-          <template #title>
-            <span>{{$t('entities.httpResponseLatency')}}</span>
-          </template>
-          <template #data>
-            <span>{{entityData.httpResponseLatency ? unitConvert(entityData.httpResponseLatency, unitTypes.time).join(' ') : '-'}}</span>
-          </template>
-        </single-value>
-        <single-value
-            :type="51"
-            icon="cn-icon cn-icon-ssl"
-            class="cn-chart__single-value--detail-overview"
-            :loading="false"
-            style="width: 180px;"
-        >
-          <template #title>
-            <span>{{$t('entities.sslConLatency')}}</span>
-          </template>
-          <template #data>
-            <span>{{entityData.sslConLatency ? unitConvert(entityData.sslConLatency, unitTypes.time).join(' ') : '-'}}</span>
-          </template>
-        </single-value>
-        <single-value
-            :type="51"
-            icon="cn-icon cn-icon-package-loss"
-            class="cn-chart__single-value--detail-overview"
-            :loading="false"
-            style="width: 180px;"
-        >
-          <template #title>
-            <span>{{$t('entities.sequenceGapLossPercent')}}</span>
-          </template>
-          <template #data>
-            <span>{{entityData.sequenceGapLossPercent ? unitConvert(entityData.sequenceGapLossPercent, unitTypes.percent).join(' ') : '-'}}</span>
-          </template>
-        </single-value>
-        <single-value
-            :type="51"
-            icon="cn-icon cn-icon-upload"
-            class="cn-chart__single-value--detail-overview"
-            :loading="false"
-            style="width: 180px;"
-        >
-          <template #title>
-            <span>{{$t('entities.pktRetransPercent')}}</span>
-          </template>
-          <template #data>
-            <span>{{entityData.pktRetransPercent ? unitConvert(entityData.pktRetransPercent, unitTypes.percent).join(' ') : '-'}}</span>
-          </template>
-        </single-value>
+        <chart-single-value
+          v-for="(chartInfo, i) in singleValues.chartInfos"
+          :chart-info="chartInfo"
+          :chart-data="singleValues.chartDatas[i]"
+        ></chart-single-value>
       </div>
     </div>
   </div>
@@ -204,28 +139,31 @@
     </div>
   </div>
   <div class="overview-map">
-    <chart
-        :chart="chart"
+    <chart2
+        :chart-info="chart"
+        :chart-data="chartData"
         :entity="entityCopy"
+        :query-params="getQueryParams"
         :hide-header="true"
         @getCurrentTimeRange="getCurrentTimeRange"
-    ></chart>
+    ></chart2>
   </div>
 </template>
 
 <script>
-import SingleValue from '@/components/charts/ChartSingleValue'
+import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { api } from '@/utils/api'
 import entityDetailMixin from './entityDetailMixin'
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import Chart from '@/views/charts/Chart'
+import Chart2 from '@/views/charts/Chart2'
 import _ from 'lodash'
+import {get} from "@/utils/http";
 export default {
   name: 'Domain',
   components: {
-    SingleValue,
-    Chart
+    ChartSingleValue,
+    Chart2
   },
   mixins: [entityDetailMixin],
   data () {
@@ -239,7 +177,54 @@ export default {
       linkOutUrl: api.entityDomainDetailLinkOut,
       alertUrl: api.entityDomainDetailAlert,
       securityUrl: api.entityDomainDetailSecurity,
-      listMode: 'list'
+      trafficUrlMap: api.entityDomainDetailTrafficMap,
+      chartData: null,
+      listMode: 'list',
+      singleValues: {
+        chartInfos: [
+          {
+            params: {
+              icon: 'cn-icon cn-icon-time',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.avgRoundTripTime'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-http',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.httpResponseLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-ssl',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.sslConLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-package-loss',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.sequenceGapLossPercent'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-upload',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.avgRoundTripTime'
+          }
+        ],
+        chartDatas: [null, null, null, null, null]
+      }
     }
   },
   methods: {
@@ -254,8 +239,33 @@ export default {
     handleRelationData (result) {
       this.entityData.appCount = result.appCount
       this.entityData.ipCount = result.ipCount
+    },
+    chartGetMap () {
+      get((this.trafficUrlMap), this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.chartData = response.data.result
+        }
+      })
     }
   },
+  watch: {
+    entityData: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if ((n.pktRetransPercent && n.sequenceGapLossPercent && n.sslConLatency && n.establishLatency && n.httpResponseLatency) !== undefined) {
+          this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency') || null)
+          this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency') || null)
+          this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency') || null)
+          this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent') || null)
+          this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent') || null)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 200)})
+  },
   setup (props) {
     const entityCopy = {
       ..._.cloneDeep(props.entity),