From 9c5206ff49440e3f8bcd0faed245597d4ecdb3d2 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Fri, 7 Mar 2025 20:01:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E5=96=84=E4=BA=A4=E9=80=9A?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/traffic/components/box-1.vue    | 78 ++++++++++++++---------
 src/views/traffic/components/spotRate.vue |  4 +-
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
index fdfc724..ffd7b48 100644
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -36,12 +36,16 @@
         <div class="chart__inner">
           <div>
             <spotRate
-                :dataList="chartData.roadNum"
-                :total="chartData.totalNum"
-                label="拥堵频次总数"
+              :dataList="chartData.roadNum"
+              :total="chartData.totalNum"
+              label="拥堵频次总数"
             />
             <ul class="chart__legend">
-              <li class="chart__legend-item" v-for="(item, index) in chartData.roadNum" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.roadNum"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -55,12 +59,16 @@
         <div class="chart__inner">
           <div>
             <spotRate
-                :dataList="chartData.roadTime"
-                :total="chartData.totalTime"
-                label="拥堵总时长"
+              :dataList="chartData.roadTime"
+              :total="chartData.totalTime"
+              label="拥堵总时长"
             />
             <ul class="chart__legend">
-              <li class="chart__legend-item" v-for="(item, index) in chartData.roadTime" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.roadTime"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -72,31 +80,43 @@
       <div class="chart-item">
         <Title3 title="拥堵类型频次占比" />
         <div class="chart__inner">
-         <div>
-           <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
-           <ul class="chart__legend">
-             <li class="chart__legend-item" v-for="(item, index) in chartData.typeNum" :key="index">
-               <p class="dot" :style="{ background: colors[index] }" />
-               <p class="name">{{ item.name }}</p>
-               <p class="value">{{ item.value }}%</p>
-             </li>
-           </ul>
-         </div>
+          <div>
+            <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
+            <ul class="chart__legend">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.typeNum"
+                :key="index"
+              >
+                <p class="dot" :style="{ background: colors[index] }" />
+                <p class="name">{{ item.name }}</p>
+                <p class="value">{{ item.value }}%</p>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
       <div class="chart-item">
         <Title3 title="拥堵类型时长占比" />
         <div class="chart__inner">
-         <div>
-           <spotRate :dataList="chartData.typeTime" :total="chartData.totalTime" label="拥堵总数" />
-           <ul class="chart__legend">
-             <li class="chart__legend-item" v-for="(item, index) in chartData.typeTime" :key="index">
-               <p class="dot" :style="{ background: colors[index] }" />
-               <p class="name">{{ item.name }}</p>
-               <p class="value">{{ item.value }}%</p>
-             </li>
-           </ul>
-         </div>
+          <div>
+            <spotRate
+              :dataList="chartData.typeTime"
+              :total="chartData.totalTime"
+              label="拥堵总数"
+            />
+            <ul class="chart__legend">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.typeTime"
+                :key="index"
+              >
+                <p class="dot" :style="{ background: colors[index] }" />
+                <p class="name">{{ item.name }}</p>
+                <p class="value">{{ item.value }}%</p>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -185,7 +205,7 @@
             position: absolute;
             content: '';
             width: vw(4);
-            height: vh(40);
+            height: vh(30);
             background-color: #0096ff;
           }
 
diff --git a/src/views/traffic/components/spotRate.vue b/src/views/traffic/components/spotRate.vue
index 7871243..daed8b5 100644
--- a/src/views/traffic/components/spotRate.vue
+++ b/src/views/traffic/components/spotRate.vue
@@ -41,7 +41,7 @@
       {
         type: 'pie',
         center: ['50%', '50%'],
-        radius: ['70%', '90%'],
+        radius: ['60%', '80%'],
         itemStyle: {
           borderWidth: fitChartSize(4),
           borderColor: '#093672'
@@ -101,6 +101,6 @@
 <style scoped lang="scss">
   .spotRate {
     width: vw(200);
-    height: vh(260);
+    height: vh(200);
   }
 </style>