diff --git a/src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss b/src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss
index 37d2ee0d..821318c8 100644
--- a/src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss
@@ -1,8 +1,9 @@
 .ddos-detection {
   display: flex;
   height: 100%;
-  width: 85%;
-  margin: auto;
+  padding: 0 20px;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
   flex-direction: column;
   justify-content: space-evenly;
   .ddos-detection-type {
diff --git a/src/assets/css/components/views/charts/NetworkOverviewLine.scss b/src/assets/css/components/views/charts/NetworkOverviewLine.scss
index 0a9d1bca..0948f961 100644
--- a/src/assets/css/components/views/charts/NetworkOverviewLine.scss
+++ b/src/assets/css/components/views/charts/NetworkOverviewLine.scss
@@ -2,6 +2,25 @@
   height: 100%;
   width: 100%;
   position: relative;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
+  .chart-drawing {
+    div:nth-of-type(2) {
+      .cn-chart-tooltip {
+        display: flex;
+        justify-content: space-between;
+        .cn-chart-tooltip-box {
+          .cn-chart-tooltip__color.cn-chart-tooltip-value {
+            font-family: NotoSansHans-Medium;
+            font-size: 12px;
+            color: #353636;
+            line-height: 12px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
   #chart {
     width: 1288px;
     height: 340px;
diff --git a/src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss
index 526c0d8d..7ee562e1 100644
--- a/src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss
@@ -1,9 +1,11 @@
 .performance-event {
-  width: 100%;
+  height: 100%;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
   .performance-event-pie {
     width: 100%;
     div {
-      height: 175px;
+      height: 165px;
       width: 324px;
     }
     .performance-event-pie-hr {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index de84ad96..f8697ada 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -195,6 +195,8 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
 
 export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#98709B']
 
+export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#F5F1F5']
+
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index 3897ee43..2b9eac76 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -459,3 +459,28 @@ export function categoryBarTooltipFormatter (params, type) {
   str += '</div>'
   return str
 }
+
+export function stackedLineTooltipFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += dateFormatByAppearance(tData)
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip">'
+    str += '<span class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += '</span>'
+    str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
+        ${unitConvert(item.data[1], 'number').join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index b1af4993..28e6e356 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cn-chart" style="background-color: lightgray;height: 100%;">
+  <div class="cn-chart" style="height: 100%;">
     <loading :loading="loading"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <network-overview-line
diff --git a/src/views/charts2/charts/NetworkOverviewLine.vue b/src/views/charts2/charts/NetworkOverviewLine.vue
index 910fd227..f8cc4d2d 100644
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/NetworkOverviewLine.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="line">
-    <div id="chart"></div>
+    <div class="chart-drawing" id="chart"></div>
     <div class="line-select">
       <div class="line-select-metric">
         <span>{{$t('network.metric')}}:</span>
@@ -33,7 +33,7 @@
     </div>
     <div class="line-value">
       <div class="line-value-mpackets" v-for="item in mpackets" :key="item">
-        <span>{{item}} </span><span>mpackets/s</span>
+        <span>{{unitConvert(item, unitTypes.number)[0]}}</span>{{unitConvert(item, unitTypes.number)[1]}}<span>packets/s</span>
       </div>
     </div>
   </div>
@@ -43,7 +43,9 @@
 import * as echarts from 'echarts'
 import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
 import unitConvert from '@/utils/unit-convert'
+import { unitTypes } from '@/utils/constants.js'
 import { shallowRef } from 'vue'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 export default {
   name: 'NetworkOverviewLine',
   props: {
@@ -86,8 +88,9 @@ export default {
         }
       ],
       value2: '',
-      mpackets: [42, 1, 2, 1, 12],
+      mpackets: [4212211, 111, 112, 111, 1211],
       unitConvert,
+      unitTypes,
       chartDateObject: []
     }
   },
@@ -101,15 +104,15 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 100
+              rate: 10000000
             },
             {
               stat_time: 1652544300000,
-              rate: 50
+              rate: 20000000
             },
             {
               stat_time: 1652544600000,
-              rate: 20
+              rate: 30000000
             },
             {
               stat_time: 1652544900000,
@@ -117,123 +120,123 @@ export default {
             },
             {
               stat_time: 1652545200000,
-              rate: 45
+              rate: 40000000
             },
             {
               stat_time: 1652545500000,
-              rate: 100
+              rate: 11111111
             },
             {
               stat_time: 1652545800000,
-              rate: 27
+              rate: 11111111
             },
             {
               stat_time: 1652546100000,
-              rate: 45
+              rate: 11111111
             },
             {
               stat_time: 1652546400000,
-              rate: 67
+              rate: 11111111
             },
             {
               stat_time: 1652546700000,
-              rate: 87
+              rate: 8000000
             },
             {
               stat_time: 1652547000000,
-              rate: 32
+              rate: 11111111
             },
             {
               stat_time: 1652547300000,
-              rate: 56
+              rate: 11111111
             },
             {
               stat_time: 1652547600000,
-              rate: 25
+              rate: 11111111
             },
             {
               stat_time: 1652547900000,
-              rate: 56
+              rate: 11111111
             },
             {
               stat_time: 1652548200000,
-              rate: 15
+              rate: 9000000
             },
             {
               stat_time: 1652548500000,
-              rate: 54
+              rate: 11111111
             },
             {
               stat_time: 1652548800000,
-              rate: 56
+              rate: 11111111
             },
             {
               stat_time: 1652549100000,
-              rate: 76
+              rate: 11111111
             },
             {
               stat_time: 1652549400000,
-              rate: 79
+              rate: 11111111
             },
             {
               stat_time: 1652549700000,
-              rate: 76
+              rate: 11111111
             },
             {
               stat_time: 1652550000000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652550300000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652550600000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652550900000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652551200000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652551500000,
-              rate: 65
+              rate: 11111111
             },
             {
               stat_time: 1652551800000,
-              rate: 66
+              rate: 11111111
             },
             {
               stat_time: 1652552100000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652552400000,
-              rate: 23
+              rate: 11111111
             },
             {
               stat_time: 1652552700000,
-              rate: 32
+              rate: 11111111
             },
             {
               stat_time: 1652553000000,
-              rate: 54
+              rate: 11111111
             },
             {
               stat_time: 1652553300000,
-              rate: 32
+              rate: 11111111
             },
             {
               stat_time: 1652553600000,
-              rate: 43
+              rate: 11111111
             },
             {
               stat_time: 1652553900000,
-              rate: 46
+              rate: 11111111
             },
             {
               stat_time: 1652554200000,
@@ -241,7 +244,7 @@ export default {
             },
             {
               stat_time: 1652554500000,
-              rate: 34
+              rate: 11111111
             },
             {
               stat_time: 1652554800000,
@@ -469,11 +472,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 13441235
+              rate: 33441235
             },
             {
               stat_time: 1652571900000,
-              rate: 13409372
+              rate: 33409372
             },
             {
               stat_time: 1652572200000,
@@ -1257,11 +1260,11 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 59770054
+              rate: 11000000
             },
             {
               stat_time: 1652544300000,
-              rate: 57705198
+              rate: 97705191
             },
             {
               stat_time: 1652544600000,
@@ -1269,11 +1272,11 @@ export default {
             },
             {
               stat_time: 1652544900000,
-              rate: 53932331
+              rate: 23932331
             },
             {
               stat_time: 1652545200000,
-              rate: 50820084
+              rate: 70820084
             },
             {
               stat_time: 1652545500000,
@@ -1285,7 +1288,7 @@ export default {
             },
             {
               stat_time: 1652546100000,
-              rate: 45092019
+              rate: 55092019
             },
             {
               stat_time: 1652546400000,
@@ -1309,7 +1312,7 @@ export default {
             },
             {
               stat_time: 1652547900000,
-              rate: 32593269
+              rate: 42593269
             },
             {
               stat_time: 1652548200000,
@@ -1605,7 +1608,7 @@ export default {
             },
             {
               stat_time: 1652570100000,
-              rate: 11730266
+              rate: 41730266
             },
             {
               stat_time: 1652570400000,
@@ -1625,11 +1628,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 13441235
+              rate: 23441235
             },
             {
               stat_time: 1652571900000,
-              rate: 13409372
+              rate: 23409372
             },
             {
               stat_time: 1652572200000,
@@ -2413,7 +2416,7 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 59770054
+              rate: 12000000
             },
             {
               stat_time: 1652544300000,
@@ -2421,15 +2424,15 @@ export default {
             },
             {
               stat_time: 1652544600000,
-              rate: 54907153
+              rate: 84907153
             },
             {
               stat_time: 1652544900000,
-              rate: 53932331
+              rate: 83932331
             },
             {
               stat_time: 1652545200000,
-              rate: 50820084
+              rate: 60820084
             },
             {
               stat_time: 1652545500000,
@@ -2441,7 +2444,7 @@ export default {
             },
             {
               stat_time: 1652546100000,
-              rate: 45092019
+              rate: 25092019
             },
             {
               stat_time: 1652546400000,
@@ -2449,7 +2452,7 @@ export default {
             },
             {
               stat_time: 1652546700000,
-              rate: 42635307
+              rate: 62635307
             },
             {
               stat_time: 1652547000000,
@@ -2761,7 +2764,7 @@ export default {
             },
             {
               stat_time: 1652570100000,
-              rate: 11730266
+              rate: 21730266
             },
             {
               stat_time: 1652570400000,
@@ -2781,11 +2784,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 13441235
+              rate: 73441235
             },
             {
               stat_time: 1652571900000,
-              rate: 13409372
+              rate: 73409372
             },
             {
               stat_time: 1652572200000,
@@ -3569,23 +3572,23 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 59770054
+              rate: 13000000
             },
             {
               stat_time: 1652544300000,
-              rate: 57705198
+              rate: 37705198
             },
             {
               stat_time: 1652544600000,
-              rate: 54907153
+              rate: 64907153
             },
             {
               stat_time: 1652544900000,
-              rate: 53932331
+              rate: 93932331
             },
             {
               stat_time: 1652545200000,
-              rate: 50820084
+              rate: 30820084
             },
             {
               stat_time: 1652545500000,
@@ -3597,7 +3600,7 @@ export default {
             },
             {
               stat_time: 1652546100000,
-              rate: 45092019
+              rate: 75092019
             },
             {
               stat_time: 1652546400000,
@@ -3605,7 +3608,7 @@ export default {
             },
             {
               stat_time: 1652546700000,
-              rate: 42635307
+              rate: 22635307
             },
             {
               stat_time: 1652547000000,
@@ -3621,7 +3624,7 @@ export default {
             },
             {
               stat_time: 1652547900000,
-              rate: 32593269
+              rate: 72593269
             },
             {
               stat_time: 1652548200000,
@@ -3917,7 +3920,7 @@ export default {
             },
             {
               stat_time: 1652570100000,
-              rate: 11730266
+              rate: 91730266
             },
             {
               stat_time: 1652570400000,
@@ -3937,11 +3940,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 13441235
+              rate: 93441235
             },
             {
               stat_time: 1652571900000,
-              rate: 13409372
+              rate: 93409372
             },
             {
               stat_time: 1652572200000,
@@ -4725,19 +4728,19 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 59770054
+              rate: 14000000
             },
             {
               stat_time: 1652544300000,
-              rate: 57705198
+              rate: 77705198
             },
             {
               stat_time: 1652544600000,
-              rate: 54907153
+              rate: 24907153
             },
             {
               stat_time: 1652544900000,
-              rate: 53932331
+              rate: 33932331
             },
             {
               stat_time: 1652545200000,
@@ -4753,7 +4756,7 @@ export default {
             },
             {
               stat_time: 1652546100000,
-              rate: 45092019
+              rate: 15092019
             },
             {
               stat_time: 1652546400000,
@@ -4761,7 +4764,7 @@ export default {
             },
             {
               stat_time: 1652546700000,
-              rate: 42635307
+              rate: 82635307
             },
             {
               stat_time: 1652547000000,
@@ -4777,7 +4780,7 @@ export default {
             },
             {
               stat_time: 1652547900000,
-              rate: 32593269
+              rate: 12593269
             },
             {
               stat_time: 1652548200000,
@@ -5073,7 +5076,7 @@ export default {
             },
             {
               stat_time: 1652570100000,
-              rate: 11730266
+              rate: 31730266
             },
             {
               stat_time: 1652570400000,
@@ -5093,11 +5096,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 13441235
+              rate: 63441235
             },
             {
               stat_time: 1652571900000,
-              rate: 13409372
+              rate: 63409372
             },
             {
               stat_time: 1652572200000,
@@ -5884,6 +5887,10 @@ export default {
       this.chartOption.series.forEach((t, i) => {
         t.data = this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate])
       })
+      this.chartOption.tooltip.formatter = (params) => {
+        const str = stackedLineTooltipFormatter(params)
+        return str
+      }
       this.myChart.setOption(this.chartOption)
     },
     // 点击前，高亮legend个数
diff --git a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
index 4b814fb9..eaa3cbf6 100644
--- a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="performance-event">
     <div class="performance-event-pie">
-      <div id="chart1"></div>
+      <div class="chart-drawing" id="chart1"></div>
       <div class="performance-event-pie-hr"></div>
-      <div id="chart2"></div>
+      <div class="chart-drawing" id="chart2"></div>
     </div>
     <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
   </div>
diff --git a/src/views/charts2/charts/options/pie.js b/src/views/charts2/charts/options/pie.js
index 36ea41b9..f5d0ede7 100644
--- a/src/views/charts2/charts/options/pie.js
+++ b/src/views/charts2/charts/options/pie.js
@@ -1,4 +1,5 @@
-import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants'
+import { chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
 import * as echarts from 'echarts'
 
 export const pieChartOption1 = {
@@ -110,13 +111,7 @@ export const pieChartOption2 = {
 export const stackedLineChartOption = {
   color: chartColor3,
   tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross',
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+    trigger: 'axis'
   },
   legend: {
     type: 'scroll',
@@ -149,16 +144,24 @@ export const stackedLineChartOption = {
   ],
   yAxis: [
     {
-      type: 'value'
+      type: 'value',
+      axisLabel: {
+        formatter: function (value) {
+          return unitConvert(value, unitTypes.number).join('')
+        }
+      }
     }
   ],
   series: [
     {
       name: 'Total',
       type: 'line',
-      stack: 'Total',
       symbol: 'circle',
+      hoverAnimation: false,
       smooth: true,
+      symbolSize: function (value, params) {
+        return symbolSizeSortChange(0, value[0])
+      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
@@ -185,9 +188,11 @@ export const stackedLineChartOption = {
     {
       name: 'Inbound',
       type: 'line',
-      stack: 'Total',
       symbol: 'circle',
       smooth: true,
+      symbolSize: function (value, params) {
+        return symbolSizeSortChange(1, value[0])
+      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
@@ -214,9 +219,11 @@ export const stackedLineChartOption = {
     {
       name: 'Outbound',
       type: 'line',
-      stack: 'Total',
       symbol: 'circle',
       smooth: true,
+      symbolSize: function (value, params) {
+        return symbolSizeSortChange(2, value[0])
+      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
@@ -243,9 +250,11 @@ export const stackedLineChartOption = {
     {
       name: 'Internal',
       type: 'line',
-      stack: 'Total',
       symbol: 'circle',
       smooth: true,
+      symbolSize: function (value, params) {
+        return symbolSizeSortChange(3, value[0])
+      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
@@ -272,9 +281,11 @@ export const stackedLineChartOption = {
     {
       name: 'Other',
       type: 'line',
-      stack: 'Total',
       symbol: 'circle',
       smooth: true,
+      symbolSize: function (value, params) {
+        return symbolSizeSortChange(4, value[0])
+      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
@@ -300,3 +311,28 @@ export const stackedLineChartOption = {
     }
   ]
 }
+const sizes = [3, 6, 8, 9, 10]
+function symbolSizeSortChange (index, time) {
+  const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
+  const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
+  const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
+  const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
+  const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
+  totalData[2] = 0
+  inboundData[2] = 1
+  outboundData[2] = 2
+  internalData[2] = 3
+  otherData[2] = 4
+  const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
+  dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
+  const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
+  // stackedLineChartOption.series[sortIndex].itemStyle = {
+  //   emphasis: {
+  //     borderColor: chartColor4[sortIndex],
+  //     borderWidth: 2,
+  //     shadowColor: chartColor4[sortIndex],
+  //     shadowBlur: sizes[sortIndex] + 2
+  //   }
+  // }
+  return sizes[sortIndex]
+}