diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
index 849c355d..836fe876 100644
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -21,6 +21,9 @@
     padding: 0 20px;
     display: flex;
     flex-direction: column;
+    .panel-chart__no-data {
+      height: calc(100% - 46px);
+    }
     .ddos-detection-type {
       display: flex;
       justify-content: space-between;
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index 001dd581..e0409c80 100644
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -18,45 +18,44 @@
   }
   .performance-event-value {
     width: 100%;
-    height: calc(100% - 36px);
+    height: calc(100% - 81px);
+    .performance-event-pie-hr {
+      height: 1px;
+      width: 310px;
+      margin: auto;
+      background: #E2E5EC;
+    }
     .performance-event-pie {
-      height: calc(100% - 47px);
+      height: 50%;
       width: 100%;
       .chart-drawing {
-        height: 50%;
+        height: 100%;
         width: 100%;
       }
-      .performance-event-pie-hr {
-        height: 1px;
-        width: 310px;
-        margin: auto;
-        background: #E2E5EC;
-      }
-    }
-    .pie-button.el-button {
-      width: 96px;
-    }
-    .el-button {
-      width: 117px;
-      min-height: 28px;
-      background: #FBFBFB;
-      border: 1px solid #C5C5C5;
-      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-      border-radius: 4px;
-      padding: 8px 5px;
-      margin-left: 30px;
-      span {
-        font-size: 12px;
-        color: #575757;
-        font-weight: 500;
-        i {
-          transform: rotate(-90deg);
-          color: #575757;
-          font-size: 12px;
-          margin-left: 4px;
-        }
-      }
     }
   }
-
+  .pie-button.el-button {
+    width: 96px;
+  }
+  .el-button {
+    width: 117px;
+    min-height: 28px;
+    background: #FBFBFB;
+    border: 1px solid #C5C5C5;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+    padding: 8px 5px;
+    margin-left: 30px;
+    span {
+      font-size: 12px;
+      color: #575757;
+      font-weight: 500;
+      i {
+        transform: rotate(-90deg);
+        color: #575757;
+        font-size: 12px;
+        margin-left: 4px;
+      }
+    }
+  }
 }
diff --git a/src/views/charts2/charts/NetworkOverviewDdosDetection.vue b/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
index 22b39429..1b7c3dbe 100644
--- a/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
@@ -2,7 +2,8 @@
  <div class="ddos-detection">
    <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
    <div class="ddos-detection-value">
-     <div class="ddos-detection-type">
+     <chart-no-data v-if="isNoData"></chart-no-data>
+     <div class="ddos-detection-type" v-else>
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
          <div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -25,14 +26,19 @@
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NetworkOverviewDdosDetection',
   props: {
     timeFilter: Object
   },
+  components: {
+    ChartNoData
+  },
   data () {
     return {
-      ddosData: {}
+      ddosData: {},
+      isNoData: false
     }
   },
   methods: {
@@ -43,6 +49,11 @@ export default {
       }
       get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
         if (res.code === 200) {
+          // res.data.result.length = 0
+          if (res.data.result.length === 0) {
+            this.isNoData = true
+            return
+          }
           this.ddosData = res.data.result[0]
         }
       })
diff --git a/src/views/charts2/charts/NetworkOverviewLine.vue b/src/views/charts2/charts/NetworkOverviewLine.vue
index 1b14bafd..0d53c6d4 100644
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/NetworkOverviewLine.vue
@@ -1,60 +1,63 @@
 <template>
   <div class="line network">
-    <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
-    <div class="line-value-active" v-if="activeShow"></div>
-    <div class="line-value">
-      <div class="line-value-mpackets"
-           v-show="item.show"
-           :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-           v-for="(item, index) in mpackets"
-           :key="index"
-           @mouseenter="mouseenter(item)"
-           @mouseleave="mouseleave(item)"
-           @click="activeChange(item, index)">
-        <div class="line-value-mpackets-name">
-          <div :class="item.class"></div>
-          <div class="mpackets-name">{{$t(item.name)}}</div>
-        </div>
-        <div class="line-value-unit">
-          <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-          <span class="line-value-unit-number2">
+    <chart-no-data v-if="isNoData"></chart-no-data>
+    <template v-else>
+      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
+      <div class="line-value-active" v-if="activeShow"></div>
+      <div class="line-value">
+        <div class="line-value-mpackets"
+             v-show="item.show"
+             :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+             v-for="(item, index) in mpackets"
+             :key="index"
+             @mouseenter="mouseenter(item)"
+             @mouseleave="mouseleave(item)"
+             @click="activeChange(item, index)">
+          <div class="line-value-mpackets-name">
+            <div :class="item.class"></div>
+            <div class="mpackets-name">{{$t(item.name)}}</div>
+          </div>
+          <div class="line-value-unit">
+            <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+            <span class="line-value-unit-number2">
             <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
             <span v-if="echartsType === 'Bits/s'">bps</span>
             <span v-else-if="echartsType === 'Packets/s'">packets/s</span>
             <span v-else-if="echartsType === 'Sessions/s'">sessions/s</span>
           </span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="line-select">
-      <div class="line-select-metric">
-        <span>{{$t('network.metric')}}:</span>
-        <div class="line-select__operation">
-          <el-select
-              size="mini"
-              v-model="value1"
-              popper-class="metric"
-              @change="metricSelectChange"
-          >
-            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
+      <div class="line-select">
+        <div class="line-select-metric">
+          <span>{{$t('network.metric')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="value1"
+                popper-class="metric"
+                @change="metricSelectChange"
+            >
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="line-select-reference-line">
+          <span>{{$t('network.referenceLine')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="value2"
+                :disabled="activeShow === ''"
+                popper-class="reference-line"
+                @change="referenceSelectChange"
+            >
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
         </div>
       </div>
-      <div class="line-select-reference-line">
-        <span>{{$t('network.referenceLine')}}:</span>
-        <div class="line-select__operation">
-          <el-select
-              size="mini"
-              v-model="value2"
-              :disabled="activeShow === ''"
-              popper-class="reference-line"
-              @change="referenceSelectChange"
-          >
-            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </div>
-      </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -69,12 +72,16 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NetworkOverviewLine',
   props: {
     chart: Object,
     timeFilter: Object
   },
+  components: {
+    ChartNoData
+  },
   setup () {
     return {
       myChart: shallowRef(null)
@@ -132,7 +139,8 @@ export default {
       echartsType: 'Bits/s',
       echartsData: {},
       dynamicVariable: '',
-      showMarkLine: true
+      showMarkLine: true,
+      isNoData: false
     }
   },
   watch: {
@@ -157,6 +165,11 @@ export default {
       }
       get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
+          // res.data.result.length = 0
+          if (res.data.result.length === 0) {
+            this.isNoData = true
+            return
+          }
           res.data.result.forEach((t, i) => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               this.mpackets[0].analysis = t.totalBitsRate.analysis
diff --git a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
index b82fe284..fcf640c7 100644
--- a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
@@ -3,12 +3,16 @@
     <div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
     <div class="performance-event-value">
       <div class="performance-event-pie">
-        <div class="chart-drawing" id="chart1"></div>
-        <div class="performance-event-pie-hr"></div>
-        <div class="chart-drawing" id="chart2"></div>
+        <chart-no-data v-if="isNoData"></chart-no-data>
+        <div class="chart-drawing" id="chart1" v-else></div>
+      </div>
+      <div class="performance-event-pie-hr"></div>
+      <div class="performance-event-pie">
+        <chart-no-data v-if="isNoData2"></chart-no-data>
+        <div class="chart-drawing" id="chart2" v-else></div>
       </div>
-      <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
     </div>
+    <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
   </div>
 </template>
 
@@ -19,6 +23,7 @@ import { shallowRef } from 'vue'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NetworkOverviewPerformanceEvent',
   setup () {
@@ -30,9 +35,14 @@ export default {
   props: {
     timeFilter: Object
   },
+  components: {
+    ChartNoData
+  },
   data () {
     return {
-      timer: null
+      timer: null,
+      isNoData: false,
+      isNoData2: false
     }
   },
   methods: {
@@ -48,6 +58,11 @@ export default {
         this.chartOption = pieChartOption1
         get(api.netWorkOverview.eventSeverity, params).then(res => {
           if (res.code === 200) {
+            // res.data.result.length = 0
+            if (res.data.result.length === 0) {
+              this.isNoData = true
+              return
+            }
             res.data.result = res.data.result.map(t => {
               return {
                 name: t.eventSeverity,
@@ -69,6 +84,11 @@ export default {
         this.chartOption2 = pieChartOption2
         get(api.netWorkOverview.eventType, params).then(res => {
           if (res.code === 200) {
+            // res.data.result.length = 0
+            if (res.data.result.length === 0) {
+              this.isNoData2 = true
+              return
+            }
             res.data.result = res.data.result.map(t => {
               return {
                 name: t.eventType,
diff --git a/src/views/charts2/charts/NetworkOverviewTabs.vue b/src/views/charts2/charts/NetworkOverviewTabs.vue
index 4fa01326..da3d6b79 100644
--- a/src/views/charts2/charts/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/NetworkOverviewTabs.vue
@@ -66,7 +66,7 @@
       </template>
 
     </el-tabs>
-    <div class="tab-search" >
+    <div class="tab-search">
       <div class="search-select"  v-if="drillDown">
         <span>{{$t('network.metric')}}:</span>
         <el-select v-model="metric"
@@ -140,7 +140,6 @@
         </el-tabs>
       </el-popover>
     </div>
-
   </div>
 
 </template>
diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue
index b2b81e37..5fce9b5f 100644
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="single-value" v-for="(npm, index) in npmNetworkCycleData" :key="index">
+  <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
     <template v-if="index === 0">
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">