diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 79132709..55c57468 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -8,6 +8,9 @@
     height: 100%;
     display: flex;
     flex: 1;
+    .npm-app-letter-no-data.npm-app-letter {
+      min-width: 500px;
+    }
     .npm-app-letter {
       display: flex;
       flex-direction: column-reverse;
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 5be956db..9ca70b81 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,3 +1,12 @@
+.cn-chart__map-title {
+  font-size: 14px;
+  color: #353636;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.cn-chart__map-drilldown.cn-chart__map {
+  height: calc(100% - 30px);
+}
 .cn-chart__map {
   height: 100%;
   width: 100%;
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index daaf99c3..3744f997 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="npm-app">
     <div class="npm-app-left">
-      <div class="npm-app-letter">
+      <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
         <div v-for="(letter, index) in colorPatchData" :key="index">
           {{letter.letter}}
         </div>
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 56f942cb..c92bcbf4 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="cn-chart__map">
+  <div class="cn-chart__map-title" v-if="tabIndex == 1">{{$t('npm.clientLocation')}}</div>
+  <div class="cn-chart__map" :class="{'cn-chart__map-drilldown': tabIndex == 1}">
     <div class="map-canvas" id="npmDrillDownMap"></div>
   </div>
 </template>
 
 <script>
-import { shallowRef } from 'vue'
+import { ref, shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
@@ -15,8 +16,16 @@ import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
+import { useRoute } from 'vue-router'
 export default {
   name: 'NpmIpMap',
+  setup () {
+    const { query } = useRoute()
+    const tabIndex = ref(query.tabIndex || '')
+    return {
+      tabIndex
+    }
+  },
   data () {
     return {
       myChart: null,