diff --git a/front/src/api/capabilityCloud.js b/front/src/api/capabilityCloud.js
index 109ccc44..03fac901 100644
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@@ -80,3 +80,17 @@ export function dataResourceInfo(params) {
     params,
   })
 }
+//能力云图-调用趋势
+export function callTheTrendPort(start, end, params) {
+  return request({
+    url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
+    method: 'get',
+  })
+}
+//能力云图-调用次数
+export function totalCallsSnum(params) {
+  return request({
+    url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
+    method: 'get',
+  })
+}
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index 32fdaf2e..4003bd3b 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -117,6 +117,8 @@
   import {
     assemblerBaseStatic,
     componentServiceRank,
+    callTheTrendPort,
+    totalCallsSnum,
   } from '@/api/capabilityCloud'
   import * as moment from 'moment'
   let snum = ref([
@@ -145,20 +147,50 @@
           .subtract('days', 6 - i)
           .format('MM-DD')
         callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
         console.log('time', callTheTrendData.value, name)
       }
-      callTheTrend(callTheTrendData.value)
+      const start = parseInt(
+        (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      callTheTrendPort(start, end, 86400).then((res) => {
+        if (res.data.data.result) {
+          res.data.data.result[0].values.splice(0, 1)
+          res.data.data.result[0].values.map((item) => {
+            callTheTrendData.value.snum.push(parseInt(item[1]))
+          })
+          callTheTrend(callTheTrendData.value)
+        } else {
+          callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
+          callTheTrend(callTheTrendData.value)
+        }
+      })
     } else {
       for (let i = 0; i < 31; i++) {
         let time = moment()
           .subtract('days', 30 - i)
           .format('MM-DD')
         callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
         console.log('time', callTheTrendData.value, name)
       }
-      callTheTrend(callTheTrendData.value)
+      const start = parseInt(
+        (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      callTheTrendPort(start, end, 86400).then((res) => {
+        if (res.data.data.result) {
+          // res.data.data.result.splice(0, 1)
+          res.data.data.result[0].values.map((item) => {
+            callTheTrendData.value.snum.push(parseInt(item[1]))
+          })
+          callTheTrend(callTheTrendData.value)
+        } else {
+          for (let i = 0; i < 30; i++) {
+            callTheTrendData.value.snum.push('0')
+          }
+          callTheTrend(callTheTrendData.value)
+        }
+      })
     }
   }
   //调用趋势echarts图
@@ -316,10 +348,18 @@
       })
     })
   }
+  //总调用次数接口
+  const TotalCallsAPI = () => {
+    const end = Date.parse(new Date()) / 1000
+    totalCallsSnum(end).then((res) => {
+      snum.value[1].num = res.data.data.result[0].value[1]
+    })
+  }
   const init = () => {
     timeSwitch(timeSwitchindex.value)
     NumberOfComponentServices()
     ranking(dataclick.value)
+    TotalCallsAPI()
   }
   onMounted(() => {
     init()