diff --git a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
index ad3ed29d24..8a96194986 100644
--- a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
@@ -7,15 +7,9 @@
     </div>
     <el-container>
       <el-aside width="120px">
-        <div class="main-number-show">
-          <span class="count-number">
-            {{ apiCountData.allApiDataCountNumber }}
-          </span>
-          <span style="color: #6C317C;">
-            {{ $t('api_test.home_page.unit_of_measurement') }}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="apiCountData.allApiDataCountNumber"/>
       </el-aside>
+
       <el-main style="padding-left: 0px;padding-right: 0px;">
         <div style="width: 200px;margin:0 auto">
 
@@ -162,10 +156,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsApiInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -205,16 +200,6 @@ export default {
   position: relative;
 }
 
-.main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius: 50%;
-
-}
-
 .count-number-show {
   margin: 20px auto;
 }
diff --git a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
index 0ceb1ec7df..2ebd9497bc 100644
--- a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
@@ -7,14 +7,7 @@
     </div>
     <el-container>
       <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
-        <div class="main-number-show" style="margin: 0px auto;">
-          <span class="count-number">
-            {{sceneCountData.allApiDataCountNumber}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="sceneCountData.allApiDataCountNumber"/>
       </el-main>
     </el-container>
     <el-container class="detail-container">
@@ -127,10 +120,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsSceneInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -176,12 +170,7 @@ export default {
   font-weight: bold;
 }
 .main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
+  margin: 0 auto;
 }
 
 .count-number-show{
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
index 3c0ea50eda..204d369fd2 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
@@ -7,14 +7,7 @@
     </div>
     <el-container>
       <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
-        <div class="main-number-show" style="margin: 0px auto;">
-          <span class="count-number">
-            {{scheduleTaskCountData.allApiDataCountNumber}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/>
       </el-main>
     </el-container>
 
@@ -93,13 +86,14 @@
 
 <script>
 import 'element-ui/lib/theme-chalk/display.css';
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 
 
 export default {
 
   name: "MsScheduleTaskInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -133,13 +127,7 @@ export default {
 }
 
 .main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
-
+  margin: 0px auto;
 }
 
 .count-number-show{
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
index 14345471e8..4bf7d5f7df 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
@@ -7,14 +7,7 @@
     </div>
     <el-container>
       <el-aside width="120px">
-        <div class="main-number-show">
-          <span class="count-number">
-            {{ testCaseCountData.allApiDataCountNumber }}
-          </span>
-          <span style="color: #6C317C;">
-            {{ $t('api_test.home_page.unit_of_measurement') }}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/>
       </el-aside>
       <el-main style="padding-left: 0px;padding-right: 0px">
         <div style="width: 200px;margin:0 auto">
@@ -147,10 +140,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsTestCaseInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -194,16 +188,6 @@ export default {
   position: relative;
 }
 
-.main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius: 50%;
-
-}
-
 .count-number-show {
   margin: 20px auto;
 }
diff --git a/frontend/src/business/components/common/chart/MsCountRingChart.vue b/frontend/src/business/components/common/chart/MsCountRingChart.vue
new file mode 100644
index 0000000000..164ee0b94b
--- /dev/null
+++ b/frontend/src/business/components/common/chart/MsCountRingChart.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-tooltip :content="content + ''" placement="top-start">
+    <div class="main-number-show">
+      <span class="count-number">
+        {{content}}
+      </span>
+      <span style="color: #6C317C;">
+        {{$t('api_test.home_page.unit_of_measurement')}}
+      </span>
+    </div>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  name: "MsCountRingChart",
+  props: {
+    content: {
+      type: [Number, String]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: var(--count_number_shallow);
+  border-radius:50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.count-number {
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size: 33px;
+  color: var(--count_number);
+  position: relative;
+}
+
+</style>
diff --git a/frontend/src/business/components/track/home/TrackHome.vue b/frontend/src/business/components/track/home/TrackHome.vue
index d05cc7f3e2..4bfbd4e99a 100644
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@@ -38,7 +38,6 @@
         </el-col>
       </el-row>
 
-
     </ms-main-container>
   </ms-container>
 </template>
diff --git a/frontend/src/business/components/track/home/components/BugCountCard.vue b/frontend/src/business/components/track/home/components/BugCountCard.vue
index 55d7955fc2..34a30f2846 100644
--- a/frontend/src/business/components/track/home/components/BugCountCard.vue
+++ b/frontend/src/business/components/track/home/components/BugCountCard.vue
@@ -7,21 +7,17 @@
     </div>
     <el-container>
       <el-aside width="150px">
-        <div class="main-number-show">
-          <span class="count-number">
-            {{ bugTotalSize }}
-          </span>
-          <span style="color: #6C317C;">
-            {{ $t('api_test.home_page.unit_of_measurement') }}
-          </span>
-          <div>
-            {{ $t('test_track.home.percentage') }}
-            <span class="rage">
+
+        <ms-count-ring-chart :content="bugTotalSize"/>
+
+        <div>
+          {{ $t('test_track.home.percentage') }}
+          <span class="rage">
               {{rage}}
             </span>
-          </div>
         </div>
       </el-aside>
+
       <el-table border :data="tableData" class="adjust-table table-content" height="300">
         <el-table-column prop="index" :label="$t('test_track.home.serial_number')"
                          width="60" show-overflow-tooltip/>
@@ -57,10 +53,12 @@
 <script>
 import {getCurrentProjectID} from "@/common/js/utils";
 import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 
 export default {
   name: "BugCountCard",
   components: {
+    MsCountRingChart,
     PlanStatusTableItem
   },
   data() {
diff --git a/frontend/src/business/components/track/home/components/CaseCountCard.vue b/frontend/src/business/components/track/home/components/CaseCountCard.vue
index 398fe65ed0..554c47410a 100644
--- a/frontend/src/business/components/track/home/components/CaseCountCard.vue
+++ b/frontend/src/business/components/track/home/components/CaseCountCard.vue
@@ -7,16 +7,11 @@
     </div>
 
     <el-container>
+
       <el-aside width="120px">
-        <div class="main-number-show">
-          <span class="count-number">
-            {{trackCountData.allCaseCountNumber}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="trackCountData.allCaseCountNumber"/>
       </el-aside>
+
       <el-main style="padding-left: 0px;padding-right: 0px;">
         <div style="width: 200px;margin:0 auto">
 
@@ -123,8 +118,11 @@
 </template>
 
 <script>
+import MsInstructionsIcon from "@/business/components/common/components/MsInstructionsIcon";
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "CaseCountCard",
+  components: {MsCountRingChart, MsInstructionsIcon},
   props:{
     trackCountData: {},
   },
@@ -155,16 +153,6 @@ export default {
   position: relative;
 }
 
-.main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
-
-}
-
 .count-number-show{
   margin:20px auto;
 }
diff --git a/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue b/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
index 0867632aff..d353ea98bc 100644
--- a/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
+++ b/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
@@ -7,16 +7,11 @@
     </div>
 
     <el-container>
+
       <el-aside width="120px">
-        <div class="main-number-show">
-          <span class="count-number">
-            {{relevanceCountData.allRelevanceCaseCount}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
+        <ms-count-ring-chart :content="relevanceCountData.allRelevanceCaseCount"/>
       </el-aside>
+
       <el-main style="padding-left: 0px;padding-right: 0px;">
         <div style="width: 300px;margin:0 auto">
 
@@ -97,8 +92,10 @@
 </template>
 
 <script>
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "RelevanceCaseCard",
+  components: {MsCountRingChart},
   props:{
     relevanceCountData:{},
   },
@@ -129,16 +126,6 @@ export default {
   position: relative;
 }
 
-.main-number-show {
-  width: 100px;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
-
-}
-
 .count-number-show{
   margin:20px auto;
 }