diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index f3be6df9..047597bd 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -51,6 +51,7 @@
           height: 25px;
           line-height: 25px;
           text-align: center;
+          margin-right: 36px;
           span {
             i {
               font-size: 20px;
diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss
index 9c8a6931..7c46f867 100644
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -14,6 +14,9 @@
       margin-right: 10px;
       align-items: center;
     }
+    .npm-line-header-right:last-child {
+      margin-right: 0;
+    }
     .npm-line-header-right.active {
       .npm-line-header-icon {
         background: #ccc;
diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue
index 593340c5..498730d2 100644
--- a/src/views/charts2/charts/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/NetworkOverviewApps.vue
@@ -32,9 +32,13 @@
             <div class="app-card__body-content">
               <div class="app-card__body-content-value">
                 <div class="app-card__body-content-number">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
-                <div class="app-card__body-content-percent" :class="app.trend === 'up' ? 'red' : 'green'">
-                  <span v-if="app.trend === 'up'">+</span><span v-else-if="app.trend === 'down'">-</span>{{unitConvert(periodicJudgmentCalculationChange(app.rate, app.pRate).total, unitTypes.percent).join('')}}
+                <div class="app-card__body-content-percent red" v-if="app.value > 0">
+                  +{{unitConvert(app.value, unitTypes.percent).join('')}}
                 </div>
+                <div class="app-card__body-content-percent green" v-else-if="app.value < 0">
+                  -{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
+                </div>
+                <div v-else></div>
               </div>
             </div>
             <div class="app-card__body-previous">
@@ -116,6 +120,7 @@ import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
 import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
+import { getChainRatio } from '@/utils/tools'
 export default {
   name: 'NetworkOverviewApps',
   props: {
@@ -243,7 +248,7 @@ export default {
                       d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
                       d2.total = d[app].analysis.total
                       d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                      d2.trend = this.periodicJudgmentCalculationChange(d2.rate, d2.pRate).value
+                      d2.value = getChainRatio(d2.rate, d2.pRate)
                       this.initChart(d2)
                     }
                   })
@@ -461,20 +466,6 @@ export default {
         }
       })
     },
-    periodicJudgmentCalculationChange (period, pperiod) {
-      const periodicData = {}
-      if (period > pperiod) {
-        periodicData.value = 'up'
-        periodicData.total = pperiod === 0 ? 0 : (period - pperiod) / pperiod
-      } else if (period < pperiod) {
-        periodicData.value = 'down'
-        periodicData.total = (pperiod - period) / pperiod
-      } else {
-        periodicData.value = ''
-        periodicData.total = 0
-      }
-      return periodicData
-    },
     resize () {
       this.myChart.forEach(t => {
         t.resize()
diff --git a/src/views/charts2/charts/NpmAppCategoryScore.vue b/src/views/charts2/charts/NpmAppCategoryScore.vue
index 68dd56fd..884a3339 100644
--- a/src/views/charts2/charts/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/NpmAppCategoryScore.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="npm-app">
-<!--    <div class="npm-app-left">
+   <div class="npm-app-left">
       <div class="npm-app-letter">
         <div v-for="(letter, index) in colorPatchData" :key="index">
           {{letter.letter}}
@@ -9,27 +9,39 @@
       <div class="npm-app-body">
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
+          </template>
         </div>
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-social-network"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
+          </template>
         </div>
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-file-sharing"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
+          </template>
         </div>
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
+          </template>
         </div>
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-email"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
+          </template>
         </div>
         <div class="npm-app-body-patch">
           <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-voip"></i></span></div>
-          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
+          <template v-if="tableData.length > 0">
+            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
+          </template>
         </div>
       </div>
     </div>
@@ -50,39 +62,39 @@
               <div class="data-total">
                 <template v-if="item.prop === 'category'">
                   <span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
-                  <span class="data-total-category-value">{{$t(scope.row[item.prop])}}</span>
+                  <span class="data-total-category-value">{{$t(scope.row.i18n)}}</span>
                 </template>
                 <template v-else-if="item.prop === 'total'">
-                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  {{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}
+                  <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
                   </div>
                 </template>
                 <template v-else-if="item.prop === 'outbound'">
-                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  {{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}
+                  <div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
                   </div>
                 </template>
                 <template v-else-if="item.prop === 'inbound'">
-                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  {{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}
+                  <div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
+                  <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
@@ -106,7 +118,7 @@
           </el-table-column>
         </template>
       </el-table>
-    </div>-->
+    </div>
   </div>
 </template>
 
@@ -147,33 +159,19 @@ export default {
     timeFilter: Object
   },
   methods: {
-    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
-      let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
-      if (rowIndex === this.tableData.length - 1) {
-        style = style + 'border-bottom:0px !important;'
-      }
-      if (columnIndex === 0) {
-        style = style + 'color:#046ECA;'
-      }
-      return style
-    },
-    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
-      return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
-    },
-    chainCalculation (period, pperiod) {
-      const periodicData = {}
-      if (period > pperiod) {
-        periodicData.value = 'up'
-        periodicData.total = (period - pperiod) / pperiod
-      } else if (period < pperiod) {
-        periodicData.value = 'down'
-        periodicData.total = (pperiod - period) / pperiod
-      } else {
-        periodicData.value = ''
-        periodicData.total = 0
-      }
-      return periodicData
-    },
+    // tableCellStyle ({ row, column, rowIndex, columnIndex }) {
+    //   let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
+    //   if (rowIndex === this.tableData.length - 1) {
+    //     style = style + 'border-bottom:0px !important;'
+    //   }
+    //   if (columnIndex === 0) {
+    //     style = style + 'color:#046ECA;'
+    //   }
+    //   return style
+    // },
+    // tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+    //   return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
+    // },
     init (params) {
       if (!params) {
         params = {
@@ -200,9 +198,9 @@ export default {
 
             const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
             if (prev) {
-              result.bytesRateChainRatio = prev.totalBitsRate === 0 ? '-' : getChainRatio(d.totalBitsRate, prev.totalBitsRate)
-              result.inboundBytesRateChainRatio = prev.inboundBitsRate === 0 ? '-' : getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
-              result.outboundBytesRateChainRatio = prev.outboundBitsRate === 0 ? '-' : getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
+              result.bytesRateChainRatio = getChainRatio(d.totalBitsRate, prev.totalBitsRate)
+              result.inboundBytesRateChainRatio = getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
+              result.outboundBytesRateChainRatio = getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
             }
             return result
           })
@@ -231,8 +229,12 @@ export default {
               }
             })
             tableData.forEach(t => {
-              t.score = (t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6
+              t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+              if (t.score > 6) {
+                t.score = 6
+              }
             })
+            this.tableData = tableData
             console.info(tableData)
           })
         }
diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue
index 5fce9b5f..fca631f7 100644
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -4,11 +4,11 @@
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
-        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -23,11 +23,11 @@
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
-        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -42,11 +42,11 @@
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
-        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -61,11 +61,11 @@
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
-        <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
-        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -80,11 +80,11 @@
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
-        <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
-        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -101,6 +101,7 @@
 <script>
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
+import { getChainRatio } from '@/utils/tools'
 export default {
   name: 'SingleValue',
   props: {
@@ -123,33 +124,21 @@ export default {
           Object.keys(t).forEach(r => {
             Object.keys(e).forEach(d => {
               if (r === d) {
-                t.trend = this.chainCalculation(t[r], e[d]).value
-                t.value = this.chainCalculation(t[r], e[d]).total
+                t.trend = getChainRatio(t[r], e[d])
+                t.value = getChainRatio(t[r], e[d])
               }
             })
           })
         })
       })
       this.npmNetworkData = cycle
-    },
-    chainCalculation (period, pperiod) {
-      const periodicData = {}
-      if (period > pperiod) {
-        periodicData.value = 'up'
-        periodicData.total = (period - pperiod) / pperiod
-      } else if (period < pperiod) {
-        periodicData.value = 'down'
-        periodicData.total = (pperiod - period) / pperiod
-      } else {
-        periodicData.value = ''
-        periodicData.total = 0
-      }
-      return periodicData
     }
   },
   mounted () {
     this.timer = setTimeout(() => {
-      this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+      if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) {
+        this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+      }
     }, 500)
   },
   beforeUnmount () {
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index f3c11dc9..b5ab8838 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -258,7 +258,7 @@ export const appListChartOption = {
 export const npmLineChartOption = {
   title: {
     text: '',
-    top: 20,
+    top: 14.5,
     left: 20,
     textStyle: {
       fontSize: 14,
@@ -274,8 +274,8 @@ export const npmLineChartOption = {
     show: false
   },
   grid: {
-    top: '25%',
-    left: '4%',
+    top: '21%',
+    left: '4.6%',
     right: '4%',
     bottom: 15,
     containLabel: true