diff --git a/frontend/src/assets/style/global.less b/frontend/src/assets/style/global.less
index 620ff01837..f700fb3876 100644
--- a/frontend/src/assets/style/global.less
+++ b/frontend/src/assets/style/global.less
@@ -182,3 +182,11 @@ body {
     @apply cursor-not-allowed;
   }
 }
+
+/* 报告气泡样式 */
+.report-popover-content {
+  padding: 16px;
+  .arco-popover-content {
+    @apply mt-0;
+  }
+}
diff --git a/frontend/src/config/testPlan.ts b/frontend/src/config/testPlan.ts
index f171506561..e21ea1a558 100644
--- a/frontend/src/config/testPlan.ts
+++ b/frontend/src/config/testPlan.ts
@@ -147,7 +147,7 @@ export const toolTipConfig = {
   },
   position: 'top',
   backgroundColor: '#fff',
-  padding: 24,
+  padding: 16,
   borderWidth: 0,
   formatter(params: any) {
     const html = `
@@ -173,12 +173,18 @@ export const commonConfig = {
   legend: {
     show: false,
   },
+  grid: {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
 };
 
 export const seriesConfig = {
   name: '',
   type: 'pie',
-  radius: ['62%', '80%'],
+  radius: ['75%', '93%'],
   center: ['50%', '50%'],
   avoidLabelOverlap: false,
   label: {
@@ -196,5 +202,3 @@ export const seriesConfig = {
     show: false,
   },
 };
-
-export default {};
diff --git a/frontend/src/views/api-test/report/component/case/setReportChart.vue b/frontend/src/views/api-test/report/component/case/setReportChart.vue
index 408364dfc1..fc2d00fe2f 100644
--- a/frontend/src/views/api-test/report/component/case/setReportChart.vue
+++ b/frontend/src/views/api-test/report/component/case/setReportChart.vue
@@ -3,22 +3,22 @@
     <div class="relative mr-4">
       <div class="charts">
         <div class="text-[12px] text-[(var(--color-text-4))]">{{ t('report.detail.api.total') }}</div>
-        <a-popover position="bottom" content-class="response-popover-content">
-          <div class="one-line-text w-full max-w-[90%] text-center text-[18px] font-medium">{{
-            getIndicators(requestTotal)
-          }}</div>
+        <a-popover position="bottom" content-class="report-popover-content">
+          <div class="one-line-text w-full max-w-[90%] text-center text-[18px] font-medium">
+            {{ getIndicators(requestTotal) }}
+          </div>
           <template #content>
-            <div class="min-w-[176px] max-w-[400px] p-4 text-[14px]">
+            <div class="min-w-[176px] max-w-[400px] text-[14px]">
               <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.detail.api.total') }}</div>
-              <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
-                getIndicators(addCommasToNumber(requestTotal))
-              }}</div>
+              <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">
+                {{ getIndicators(addCommasToNumber(requestTotal)) }}
+              </div>
             </div>
           </template>
         </a-popover>
       </div>
       <!-- TODO 汇总图例暂时不要了 -->
-      <!-- <a-popover position="bottom" content-class="response-popover-content"> -->
+      <!-- <a-popover position="bottom" content-class="report-popover-content"> -->
       <div> <MsChart :width="props.size || '120px'" :height="props.size || '120px'" :options="props.options" /></div>
       <!-- <template #content>
           <div class="min-w-[176px] max-w-[400px] p-4">
@@ -42,9 +42,10 @@
           <div class="text-[var(--color-text-4)]">{{ item.label }}</div>
         </div>
         <div class="text-end font-medium text-[var(--color-text-1)]">{{ item.count || 0 }}</div>
-        <div class="text-right font-medium text-[var(--color-text-1)]"
-          >{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span
-        ></div>
+        <div class="text-right font-medium text-[var(--color-text-1)]">
+          {{ item.rote || 0 }}
+          <span v-if="String(item.rote) !== 'Calculating'"> </span>
+        </div>
       </div>
     </div>
   </div>
@@ -54,8 +55,6 @@
   /**
    * @description 用例报告独立报告
    */
-  import { ref } from 'vue';
-
   import MsChart from '@/components/pure/chart/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/views/api-test/report/component/caseReportCom.vue b/frontend/src/views/api-test/report/component/caseReportCom.vue
index 740e4c904c..1bf84396b5 100644
--- a/frontend/src/views/api-test/report/component/caseReportCom.vue
+++ b/frontend/src/views/api-test/report/component/caseReportCom.vue
@@ -179,7 +179,7 @@
   import reportInfoHeader from './step/reportInfoHeaders.vue';
   import TiledList from './tiledList.vue';
 
-  import { toolTipConfig } from '@/config/testPlan';
+  import { commonConfig, toolTipConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import { addCommasToNumber, formatDuration } from '@/utils';
 
@@ -248,6 +248,7 @@
 
   const legendData = ref<LegendData[]>([]);
   const charOptions = ref({
+    ...commonConfig,
     tooltip: {
       ...toolTipConfig,
     },
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue b/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
index 847cd65629..ac26e46f6a 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="block-title">{{ t('report.detail.executionAnalysis') }}</div>
+  <div class="mb-[16px] font-medium">{{ t('report.detail.executionAnalysis') }}</div>
   <SetReportChart
-    size="160px"
+    size="130px"
     :legend-data="legendData"
     :options="executeCharOptions"
     :request-total="getIndicators(getTotal) || 0"
@@ -13,7 +13,7 @@
 
   import SetReportChart from '@/views/api-test/report/component/case/setReportChart.vue';
 
-  import { seriesConfig, statusConfig, toolTipConfig } from '@/config/testPlan';
+  import { commonConfig, seriesConfig, statusConfig, toolTipConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
 
   import type { LegendData } from '@/models/apiTest/report';
@@ -31,6 +31,7 @@
 
   // 执行分析
   const executeCharOptions = ref({
+    ...commonConfig,
     tooltip: {
       ...toolTipConfig,
     },
diff --git a/frontend/src/views/test-plan/report/detail/component/viewReport.vue b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
index 4fbd4692d5..c31e11082e 100644
--- a/frontend/src/views/test-plan/report/detail/component/viewReport.vue
+++ b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
@@ -23,31 +23,21 @@
       <div v-if="functionalCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
         <div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
         <div class="flex">
-          <div class="w-[70%]">
+          <div class="mr-[24px] flex-1">
             <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="pending" />
             <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="success" />
             <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="block" />
-            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" />
+            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" class="!mb-0" />
           </div>
-          <div class="relative w-[30%] min-w-[150px]">
-            <div class="charts absolute w-full text-center">
+          <div class="relative">
+            <div class="charts">
               <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-              <a-popover position="bottom" content-class="response-popover-content">
-                <div class="flex justify-center text-[18px] font-medium">
-                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
-                </div>
-                <template #content>
-                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
-                      functionCasePassRate
-                    }}</div>
-                  </div>
-                </template>
-              </a-popover>
+              <div class="flex justify-center text-[16px] font-medium">
+                <div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
+              </div>
             </div>
-            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-              <MsChart width="150px" height="150px" :options="functionCaseOptions" />
+            <div class="flex h-full w-full items-center justify-center">
+              <MsChart width="100px" height="100px" :options="functionCaseOptions" />
             </div>
           </div>
         </div>
@@ -57,29 +47,21 @@
       <div v-if="apiCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
         <div class="block-title">{{ t('report.detail.apiUseCaseAnalysis') }}</div>
         <div class="flex">
-          <div class="w-[70%]">
+          <div class="mr-[24px] flex-1">
             <SingleStatusProgress type="API" :detail="detail" status="pending" />
             <SingleStatusProgress type="API" :detail="detail" status="success" />
             <SingleStatusProgress type="API" :detail="detail" status="fakeError" />
-            <SingleStatusProgress type="API" :detail="detail" status="error" />
+            <SingleStatusProgress type="API" :detail="detail" status="error" class="!mb-0" />
           </div>
-          <div class="relative w-[30%] min-w-[150px]">
-            <div class="charts absolute w-full text-center">
+          <div class="relative">
+            <div class="charts">
               <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-              <a-popover position="bottom" content-class="response-popover-content">
-                <div class="flex justify-center text-[18px] font-medium">
-                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
-                </div>
-                <template #content>
-                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ apiCasePassRate }}</div>
-                  </div>
-                </template>
-              </a-popover>
+              <div class="flex justify-center text-[16px] font-medium">
+                <div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
+              </div>
             </div>
-            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-              <MsChart width="150px" height="150px" :options="apiCaseOptions" />
+            <div class="flex h-full w-full items-center justify-center">
+              <MsChart width="100px" height="100px" :options="apiCaseOptions" />
             </div>
           </div>
         </div>
@@ -92,31 +74,21 @@
       <div v-if="scenarioCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
         <div class="block-title">{{ t('report.detail.scenarioUseCaseAnalysis') }}</div>
         <div class="flex">
-          <div class="w-[70%]">
+          <div class="mr-[24px] flex-1">
             <SingleStatusProgress type="SCENARIO" :detail="detail" status="pending" />
             <SingleStatusProgress type="SCENARIO" :detail="detail" status="success" />
             <SingleStatusProgress type="SCENARIO" :detail="detail" status="fakeError" />
-            <SingleStatusProgress type="SCENARIO" :detail="detail" status="error" />
+            <SingleStatusProgress type="SCENARIO" :detail="detail" status="error" class="!mb-0" />
           </div>
-          <div class="relative w-[30%] min-w-[150px]">
-            <div class="charts absolute w-full text-center">
+          <div class="relative">
+            <div class="charts">
               <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-              <a-popover position="bottom" content-class="response-popover-content">
-                <div class="flex justify-center text-[18px] font-medium">
-                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
-                </div>
-                <template #content>
-                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
-                      scenarioCasePassRate
-                    }}</div>
-                  </div>
-                </template>
-              </a-popover>
+              <div class="flex justify-center text-[16px] font-medium">
+                <div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
+              </div>
             </div>
-            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-              <MsChart width="150px" height="150px" :options="scenarioCaseOptions" />
+            <div class="flex h-full w-full items-center justify-center">
+              <MsChart width="100px" height="100px" :options="scenarioCaseOptions" />
             </div>
           </div>
         </div>
@@ -253,7 +225,14 @@
   import SystemTrigger from '@/views/test-plan/report/detail/component/system-card/systemTrigger.vue';
 
   import { getReportLayout, updateReportDetail } from '@/api/modules/test-plan/report';
-  import { commonConfig, defaultCount, defaultReportDetail, seriesConfig, statusConfig } from '@/config/testPlan';
+  import {
+    commonConfig,
+    defaultCount,
+    defaultReportDetail,
+    seriesConfig,
+    statusConfig,
+    toolTipConfig,
+  } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
   import { addCommasToNumber } from '@/utils';
@@ -317,6 +296,9 @@
   // 功能用例分析
   const functionCaseOptions = ref({
     ...commonConfig,
+    tooltip: {
+      ...toolTipConfig,
+    },
     series: {
       ...seriesConfig,
       data: [
@@ -333,6 +315,9 @@
   // 接口用例分析
   const apiCaseOptions = ref({
     ...commonConfig,
+    tooltip: {
+      ...toolTipConfig,
+    },
     series: {
       ...seriesConfig,
       data: [
@@ -349,6 +334,9 @@
   // 场景用例分析
   const scenarioCaseOptions = ref({
     ...commonConfig,
+    tooltip: {
+      ...toolTipConfig,
+    },
     series: {
       ...seriesConfig,
       data: [
@@ -478,6 +466,7 @@
       innerCardList.value = result;
       originLayoutInfo.value = cloneDeep(result);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -606,6 +595,7 @@
       currentItem.enableEdit = false;
       emit('updateSuccess');
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -654,12 +644,16 @@
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
       @apply rounded-xl bg-white;
       .charts {
-        top: 36%;
+        @apply absolute text-center;
+
+        top: 50%;
         right: 0;
         bottom: 0;
-        left: 0;
+        left: 50%;
         z-index: 99;
-        margin: auto;
+        width: 70px;
+        height: 42px;
+        transform: translateY(-50%) translateX(-50%);
       }
     }
     &[data-cards='2'],