diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index f141d398..0515cf08 100644
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -71,6 +71,7 @@
     white-space: nowrap;
     display: inline-block;
     margin: 0 5px;
+    color: #353636;
     .cn-icon-Data {
       color: #575757;
     }
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 323cc8cc..d7320c2f 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -31,7 +31,6 @@
           background: #749F4D;
         }
         height:24px;
-        font-family: NotoSansHans-Medium;
         font-size: 12px;
         color: #353636;
         font-weight: 500;
@@ -46,8 +45,26 @@
         justify-content: center;
       }
     }
-    .panel__time {
+    .panel__tools {
       display: flex;
+
+      &>.el-select {
+        width: 162px;
+        margin-right: 10px;
+
+        .select-prefix {
+          font-size: 14px;
+          color: #999;
+          padding: 0 6px 0 3px;
+        }
+        .el-input__inner {
+          font-size: 14px;
+          color: #353636;
+        }
+      }
+      .panel__time {
+        display: flex;
+      }
     }
   }
   .chart-list {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index a2436300..46ca98d7 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -186,6 +186,21 @@ export const networkOverviewTabs = [
   'network.protocolPorts'
 ] */
 
+export const metricOptions = [
+  {
+    value: 'Bits/s',
+    label: 'Bits/s'
+  },
+  {
+    value: 'Packets/s',
+    label: 'Packets/s'
+  },
+  {
+    value: 'Sessions/s',
+    label: 'Sessions/s'
+  }
+]
+
 export const operationType = {
   mainMenu: 0, // 菜单
   secondMenu: 2, // 二级菜单
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index a75b7c44..5aebca93 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -4,6 +4,7 @@
     <network-overview-line
         v-if="chart.type === typeMapping.networkOverview.line"
         :chart="chart"
+        :metric="metric"
         :time-filter="timeFilter"
         ref="networkLine"
         @toggleLoading="toggleLoading"
@@ -23,6 +24,7 @@
     <network-overview-tabs
          v-else-if="chart.type === typeMapping.networkOverview.table"
          :time-filter="timeFilter"
+         :metric="metric"
          :chart="chart"
          :ref="`tab${chart.id}`"
          @toggleLoading="toggleLoading"
@@ -38,6 +40,7 @@
     <network-overview-apps
         v-else-if="chart.type === typeMapping.networkOverview.appList"
         :chart="chart"
+        :metric="metric"
         :time-filter="timeFilter"
         @toggleLoading="toggleLoading"
     >
@@ -188,8 +191,7 @@ import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
 import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
 import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
 
-import { get } from '@/utils/http'
-import { getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
 import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
 export default {
@@ -224,6 +226,7 @@ export default {
   },
   props: {
     chart: Object,
+    metric: String,
     timeFilter: Object,
     extraParams: Object
   },
diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue
index 2d9495b6..977f5c67 100644
--- a/src/views/charts2/ChartList.vue
+++ b/src/views/charts2/ChartList.vue
@@ -21,6 +21,7 @@
                  :key="item.i">
         <chart
             :time-filter="timeFilter"
+            :metric="metric"
             :extra-params="extraParams"
             :id="item.id"
             ref="chartGrid"
@@ -44,6 +45,7 @@ export default {
   name: 'ChartList',
   props: {
     timeFilter: Object,
+    metric: String,
     panelType: Number,
     chartList: Array,
     panelLock: Boolean,
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 81a14366..01f08cc5 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -9,25 +9,40 @@
           Score:{{score}}
         </div>
       </div>
-      <div class="panel__time">
-        <date-time-range
-            class="date-time-range"
-            :start-time="timeFilter.startTime"
-            :end-time="timeFilter.endTime"
-            :date-range="timeFilter.dateRangeValue"
-            ref="dateTimeRange"
-            @change="reload"
-        />
-        <time-refresh
-            class="date-time-range"
-            @change="timeRefreshChange"
-            :end-time="timeFilter.endTime"
-        />
+      <div class="panel__tools">
+        <el-select
+            size="mini"
+            v-model="metric"
+            placeholder=""
+            :popper-append-to-body="false"
+            @change="metricChange"
+        >
+          <template #prefix>
+            <span class="select-prefix">Metric:</span>
+          </template>
+          <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <div class="panel__time">
+          <date-time-range
+              class="date-time-range"
+              :start-time="timeFilter.startTime"
+              :end-time="timeFilter.endTime"
+              :date-range="timeFilter.dateRangeValue"
+              ref="dateTimeRange"
+              @change="reload"
+          />
+          <time-refresh
+              class="date-time-range"
+              @change="timeRefreshChange"
+              :end-time="timeFilter.endTime"
+          />
+        </div>
       </div>
     </div>
     <chart-list
         ref="chartList"
         :time-filter="timeFilter"
+        :metric="metric"
         :chart-list="chartList"
         :panel-type="panelType"
         :panel-lock="panelLock"
@@ -43,7 +58,8 @@ import { ref } from 'vue'
 import {
   panelTypeAndRouteMapping,
   curTabState,
-  drillDownPanelTypeMapping
+  drillDownPanelTypeMapping,
+  metricOptions
 } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -63,6 +79,7 @@ export default {
   },
   data () {
     return {
+      metricOptions,
       chartList: [], // 普通panel的chart
       panelLock: true,
       extraParams: {},
@@ -213,11 +230,14 @@ export default {
     // npm是否展示分数
     const showScorePanel = [drillDownPanelTypeMapping.npmOverviewIp, drillDownPanelTypeMapping.npmOverviewDomain, drillDownPanelTypeMapping.npmOverviewApp, drillDownPanelTypeMapping.npmOverviewCommon, drillDownPanelTypeMapping.npmThirdMenu]
     const showScore = showScorePanel.indexOf(panelType) > -1
+
+    const metric = ref(query.metric || 'Bits/s')
     return {
       panelType,
       panel,
       timeFilter,
-      showScore
+      showScore,
+      metric
     }
   },
   methods: {
@@ -280,6 +300,13 @@ export default {
       } else {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
+    },
+    metricChange (value) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        metric: value
+      })
+      overwriteUrl(newUrl)
     }
   }
 }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index f72a8fed..afc4e836 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -2,21 +2,6 @@
   <div class="network-overview-apps">
     <div class="network-overview-apps-header">
       <div class="network-overview-apps-title">{{$t('networkOverview.appType.providerAndApp')}}</div>
-      <div class="line-select-metric">
-        <span>{{$t('network.metric')}}:</span>
-        <div class="line-select__operation">
-          <el-select
-              size="mini"
-              v-model="metricFilter"
-              placeholder=""
-              popper-class="common-select"
-              :popper-append-to-body="false"
-              @change="metricChange"
-          >
-            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </div>
-      </div>
     </div>
 
     <div class="app-cards">
@@ -53,7 +38,7 @@
             </div>
             <div class="app-card__body-previous">
               <div>Total</div>
-              <div v-if="metricFilter === 'Bits/s'">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
+              <div v-if="metric === 'Bits/s'">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
               <div v-else>{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
             </div>
           </div>
@@ -132,7 +117,7 @@ import unitConvert from '@/utils/unit-convert'
 import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
-import { ref, shallowRef } from 'vue'
+import { shallowRef } from 'vue'
 import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
@@ -142,7 +127,6 @@ import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
-import { useRoute } from 'vue-router'
 
 export default {
   name: 'NetworkOverviewApps',
@@ -153,20 +137,6 @@ export default {
   mixins: [chartMixin],
   data () {
     return {
-      metricOptions: [
-        {
-          value: 'Bits/s',
-          label: 'Bits/s'
-        },
-        {
-          value: 'Packets/s',
-          label: 'Packets/s'
-        },
-        {
-          value: 'Sessions/s',
-          label: 'Sessions/s'
-        }
-      ],
       appData: [],
       // 假数据
       appTempData: [],
@@ -196,22 +166,18 @@ export default {
       urlChangeParams: {}
     }
   },
+  props: {
+    metric: {
+      type: String,
+      default: 'Bits/s'
+    }
+  },
   setup () {
-    const { query } = useRoute()
-    const metricFilter = ref(query.appListMetric || 'Bits/s')
     return {
-      metricFilter,
       myChart: shallowRef([])
     }
   },
   watch: {
-    metricFilter (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        appListMetric: n
-      })
-      overwriteUrl(newUrl)
-    },
     showAddApp: {
       deep: true,
       handler (n) {
@@ -223,10 +189,11 @@ export default {
         }
       }
     },
-    timeFilter: {
-      handler () {
-        this.init()
-      }
+    timeFilter (n) {
+      this.init()
+    },
+    metric (n) {
+      this.init()
     }
   },
   methods: {
@@ -282,9 +249,9 @@ export default {
           const prevData = res[0].data.result
           const data = res[1].data.result
           let toCompareType = 'bytes'
-          if (this.metricFilter === 'Sessions/s') {
+          if (this.metric === 'Sessions/s') {
             toCompareType = 'sessions'
-          } else if (this.metricFilter === 'Packets/s') {
+          } else if (this.metric === 'Packets/s') {
             toCompareType = 'packets'
           }
           data.forEach(d => {