fix(测试跟踪): 责任人图表宽度自适应

--bug=1033312 --user=白奇 【测试跟踪】首页-用例责任人分布图表不会自适应显示/github #27765 https://www.tapd.cn/55049933/s/1602303

test-track/frontend/src/business/home/components/CaseMaintenance.vue

@@ -2,19 +2,39 @@
   <div class="dashboard-card">
     <el-card shadow="never" class="box-card" style="height: 100%">
       <div slot="header" class="clearfix">
-        <span class="dashboard-title">{{ $t('test_track.home.case_maintenance') }}</span>
+        <span class="dashboard-title">{{
+          $t("test_track.home.case_maintenance")
+        }}</span>
       </div>
 
       <div v-loading="loading" element-loading-background="#FFFFFF">
-        <div v-if="loadError"
-             style="width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center;align-items: center">
-          <img style="height: 100px;width: 100px;"
-               src="/assets/module/figma/icon_load_error.svg"/>
-          <span class="addition-info-title" style="color: #646A73">{{ $t("home.dashboard.public.load_error") }}</span>
+        <div
+          v-if="loadError"
+          style="
+            width: 100%;
+            height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <img
+            style="height: 100px; width: 100px"
+            src="/assets/module/figma/icon_load_error.svg"
+          />
+          <span class="addition-info-title" style="color: #646a73">{{
+            $t("home.dashboard.public.load_error")
+          }}</span>
         </div>
         <div v-if="!loadError">
           <el-container>
-            <ms-chart ref="chart1" :options="caseOption" :autoresize="true" style="width: 100%;height: 340px;"></ms-chart>
+            <ms-chart
+              ref="chart1"
+              :options="caseOption"
+              :autoresize="true"
+              style="width: 100%; height: 340px"
+            ></ms-chart>
           </el-container>
         </div>
       </div>
@@ -24,18 +44,18 @@
 
 <script>
 import MsChart from "metersphere-frontend/src/components/chart/MsChart";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
-import {getTrackCaseBar} from "@/api/track";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
+import { getTrackCaseBar } from "@/api/track";
 
 export default {
   name: "CaseMaintenance",
-  components: {MsChart},
+  components: { MsChart },
   data() {
     return {
       loading: false,
       loadError: false,
-      caseOption: {}
-    }
+      caseOption: {},
+    };
   },
   activated() {
     this.search();
@@ -46,104 +66,118 @@ export default {
       this.loadError = false;
       let selectProjectId = getCurrentProjectID();
       getTrackCaseBar(selectProjectId)
-        .then(r => {
+        .then((r) => {
           this.loading = false;
           this.loadError = false;
           let data = r.data;
           this.setBarOption(data);
-        }).catch(() => {
+        })
+        .catch(() => {
           this.loading = false;
           this.loadError = true;
         });
     },
     setBarOption(data) {
       let xAxis = [];
-      data.map(d => {
+      data.map((d) => {
         if (!xAxis.includes(d.xAxis)) {
           xAxis.push(d.xAxis);
         }
       });
-      let yAxis1 = data.filter(d => d.groupName === 'FUNCTIONCASE').map(d => [d.xAxis, d.yAxis]);
-      let yAxis2 = data.filter(d => d.groupName === 'RELEVANCECASE').map(d => [d.xAxis, d.yAxis]);
+      let yAxis1 = data
+        .filter((d) => d.groupName === "FUNCTIONCASE")
+        .map((d) => [d.xAxis, d.yAxis]);
+      let yAxis2 = data
+        .filter((d) => d.groupName === "RELEVANCECASE")
+        .map((d) => [d.xAxis, d.yAxis]);
       let option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
-          }
+            type: "shadow",
+          },
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: xAxis,
-          axisTick:{
-            show:false // 不显示坐标轴刻度线
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
           },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLine: {
-            show: false
+            show: false,
           },
           axisTick: {
-            show: false
+            show: false,
           },
           min: 0,
-          max: data.length === 0 ? 40 : null
+          max: data.length === 0 ? 40 : null,
         },
         grid: {
           left: 0,
           containLabel: true,
           top: 80,
           right: 24,
-          width: 600,
-          height: 255
+          bottom: 24,
         },
         legend: {
           itemWidth: 8,
           itemHeight: 8,
-          data: [{icon: 'rect', name: this.$t('test_track.home.function_case_count')}, {icon: 'rect', name: this.$t('test_track.home.relevance_case_count')}],
-          orient: 'horizontal',
-          left: '0',
-          top: '24'
+          data: [
+            {
+              icon: "rect",
+              name: this.$t("test_track.home.function_case_count"),
+            },
+            {
+              icon: "rect",
+              name: this.$t("test_track.home.relevance_case_count"),
+            },
+          ],
+          orient: "horizontal",
+          left: "0",
+          top: "24",
         },
         series: [
           {
-            name: this.$t('test_track.home.function_case_count'),
+            name: this.$t("test_track.home.function_case_count"),
             data: yAxis1,
-            type: 'bar',
+            type: "bar",
             barWidth: 16,
             barMinHeight: 5,
             itemStyle: {
-              color: '#AA4FBF',
-              barBorderRadius: [2, 2, 0, 0]
-            }
+              color: "#AA4FBF",
+              barBorderRadius: [2, 2, 0, 0],
+            },
           },
           {
-            name: this.$t('test_track.home.relevance_case_count'),
+            name: this.$t("test_track.home.relevance_case_count"),
             data: yAxis2,
-            type: 'bar',
+            type: "bar",
             barWidth: 16,
             barMinHeight: 5,
             itemStyle: {
-              color: '#F9CB2E',
-              barBorderRadius: [2, 2, 0, 0]
-            }
-          }]
+              color: "#F9CB2E",
+              barBorderRadius: [2, 2, 0, 0],
+            },
+          },
+        ],
       };
       this.caseOption = option;
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-.no-shadow-card{
-  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
-  box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+.no-shadow-card {
+  -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
 }
 
-.el-card :deep( .el-card__header ) {
-  border-bottom: 0px solid #EBEEF5;
+.el-card :deep(.el-card__header) {
+  border-bottom: 0px solid #ebeef5;
   padding-bottom: 0px;
 }
 </style>