统计top接口调用次数数据可视化实现

.github/workflows/push.yml

@@ -0,0 +1,51 @@
+name: 部署api前端项目
+
+# 只有master分支发生push主分支或pull_request关闭后事件时，才会触发workflow
+on:
+  push:
+    branches:
+      # 你的主分支名
+      - master
+  pull_request:
+    branches:
+      # 你的主分支名
+      - master
+    types:
+      - closed
+jobs:
+  build:
+    # runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
+    runs-on: ubuntu-latest
+    steps:
+      # 获取源码
+      - name: 迁出代码
+        # 使用action库  actions/checkout获取源码
+        uses: actions/checkout@v3
+
+      # 安装Node10
+      - name: 安装node.js
+        # 使用action库  actions/setup-node安装node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+
+      # 安装依赖
+      - name: 安装依赖
+        run: npm install
+
+      # 打包
+      - name: 打包
+        run: npm run build
+
+      # 上传阿里云
+      - name: 发布项目
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i --delete"
+          SOURCE: "dist/"
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: ${{ secrets.REMOTE_TARGET }}
+          # 排除项
+          EXCLUDE: "/dist/, /node_modules/"

config/routes.ts

@@ -1,8 +1,12 @@
 export default [
+  { path: '/', name: '主页',icon: 'smile' ,component: './Index' },
+  { path: '/interface_info/:id', name: '查看接口',icon: 'smile' ,component: './InterfaceInfo', hideInMenu: true},
   {
     path: '/user',
     layout: false,
-    routes: [{ name: '登录', path: '/user/login', component: './User/Login' }],
+    routes: [
+      { name: '登录', path: '/user/login', component: './User/Login' }
+    ],
   },
   // { path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome' },
   {
@@ -12,10 +16,10 @@ export default [
     // 权限控制可以去看 and design pro 的官方文档，不用纠结为什么这么写，就是人家设定的规则而已
     access: 'canAdmin',
     routes: [
-      { name: '接口管理', icon: 'table', path: '/admin/interface_info', component: './InterfaceInfo' },
+      { name: '接口管理', icon: 'table', path: '/admin/interface_info', component: './Admin/InterfaceInfo' },
+      { name: '接口分析', icon: 'analysis', path: '/admin/interface_analysis', component: './Admin/InterfaceAnalysis' }
     ],
   },
 
-  // { path: '/', redirect: '/welcome' },
   { path: '*', layout: false, component: './404' },
 ];

package.json

@@ -36,16 +36,24 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
-    "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write"
+    ]
   },
-  "browserslist": ["> 1%", "last 2 versions", "not ie <= 10"],
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@ant-design/pro-components": "^2.6.48",
     "@umijs/route-utils": "^2.2.2",
     "antd": "^5.13.2",
     "antd-style": "^3.6.1",
     "classnames": "^2.5.1",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "omit.js": "^2.0.2",
@@ -87,5 +95,7 @@
     "umi-presets-pro": "^2.0.3",
     "umi-serve": "^1.9.11"
   },
-  "engines": { "node": ">=12.0.0" }
+  "engines": {
+    "node": ">=12.0.0"
+  }
 }

src/pages/Admin/InterfaceAnalysis/index.tsx

@@ -0,0 +1,71 @@
+import { PageContainer } from '@ant-design/pro-components';
+import '@umijs/max';
+import React, {useEffect, useState} from 'react';
+import ReactECharts from 'echarts-for-react';
+import {listTopInvokeInterfaceInfoUsingGet} from "@/services/linger-api-backend/analysisController";
+
+/**
+ * 接口分析
+ * @constructor
+ */
+const InterfaceAnalysis: React.FC = () => {
+
+  const [data, setData] = useState<API.InterfaceInfoVO[]>([]);
+
+  useEffect(() => {
+    try {
+      listTopInvokeInterfaceInfoUsingGet().then(res => {
+        if (res.data) {
+          setData(res.data);
+        }
+      })
+    } catch (e: any) {
+
+    }
+    // todo 从远程获取数据
+  }, [])
+
+  // 映射：{ value: 1048, name: 'Search Engine' },
+  const chartData = data.map(item => {
+    return {
+      value: item.totalNum,
+      name: item.name,
+    }
+  })
+
+  const option = {
+    title: {
+      text: '调用次数最多的接口TOP3',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: '50%',
+        data: chartData,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+
+  return (
+    <PageContainer>
+      <ReactECharts option={option} />
+    </PageContainer>
+  );
+};
+export default InterfaceAnalysis;