perf: 自主管理图例添加数字

app/src/views/Home/components/AutonomousManagement/Maintenance3D.vue

@@ -27,6 +27,10 @@ const legendItems = ref([
   }
 ])
 
+function showValue(name) {
+  return props.wbxsList.find(item => item.name === name)?.value
+}
+
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
@@ -387,7 +391,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -410,7 +414,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";

app/src/views/Home/components/AutonomousManagement/Overhaul3D.vue

@@ -21,6 +21,10 @@ const legendItems = ref([
     color: '#c3c71b'
   }
 ])
+function showValue(name) {
+  return props.dxjjList.find(item => item.name === name)?.value
+}
+
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
@@ -380,7 +384,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems" @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -394,7 +398,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 .container .legend {
   position: absolute;
   right: 10px;
-  top: 55px;
+  top: 130px;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -402,7 +406,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";

app/src/views/Home/components/AutonomousManagement/PieChart3D.vue

@@ -33,6 +33,9 @@ const legendItems = ref([
     color: '#FF7A00'
   },
 ])
+function showValue(name) {
+  return props.glxsList.find(item => item.name === name)?.value
+}
 
 function initChart() {
   chart = echarts.init(pieChart3d.value);
@@ -391,7 +394,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -414,7 +417,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";
@@ -453,7 +455,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 }
 
 .chart {
-  width: 440px;
+  width: 400px;
   height: 100%;
   position: relative;
   z-index: 1;

app/src/views/Home/components/AutonomousManagement/index.vue

@@ -42,7 +42,6 @@ export default {
       getWbxs({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy }).then(
         (res) => {
           let list = res.data.rows;
-      
           list = res.data.rows.map((item) => {
             return [
               {
@@ -84,7 +83,6 @@ export default {
     getWtype() {
       getDxjj({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy }).then(
         (res) => {
-        
           let lists = res.data.rows;
           lists = res.data.rows.map((item) => {
             return [
@@ -100,7 +98,6 @@ export default {
               name: '无（消防设施有问题）',
               value: item.wdxjjxfssywt,
             },
-          
             ]
           });
           this.dxjjList =lists[0];