图层分析 调整

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -20,7 +20,14 @@
       </div>
       <div class="box2">
         <div class="box2-title">类型统计</div>
-        <Chart :option="chartOption2" style="width: 100%; height: 422px; margin-top: 60px" />
+        <div class="box2-right">
+          <Chart :option="chartOption2" style="width: 500px; height: 100%" />
+          <div class="legend-box">
+            <div v-for="(item, index) in legendData" :key="index" class="legend-item">
+              <span class="dot" :style="{ backgroundColor: getColor(index) }"></span>{{ item.name }}：{{ item.value }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -30,19 +37,31 @@
 import { PointType } from '@/api/globalMap/type';
 import {
   getBuildingProjectType,
-  getChemicalType, getChemicalWarehouseType, getConstructionSitesType,
+  getChemicalType,
+  getChemicalWarehouseType,
+  getConstructionSitesType,
   getCountPointInfo,
-  getCountPointInfoAreaList, getCountPointInfoTypeErtongfulijigou,
-  getDroneType, getEmergencyDisasterInfoOfficerType,
+  getCountPointInfoAreaList,
+  getCountPointInfoTypeErtongfulijigou,
+  getDroneType,
+  getEmergencyDisasterInfoOfficerType,
   getEmergencyExpertType,
-  getEmergencyShelterType, getEmergencyTransportResourcesType,
+  getEmergencyShelterType,
+  getEmergencyTransportResourcesType,
   getGasolineType,
-  getHospitalType, getMajorHazardSourceType, getMidmapDzzhType, getMiningOperationsType,
-  getMiningType, getRainPitsType,
+  getHospitalType,
+  getMajorHazardSourceType,
+  getMidmapDzzhType,
+  getMiningOperationsType,
+  getMiningType,
+  getRainPitsType,
   getRescueMateriaType,
   getSchoolType,
-  getShipType, getStationInfoType, getTouristAttractionType,
-  getWaterloggedRoadsType, getYardSitesType
+  getShipType,
+  getStationInfoType,
+  getTouristAttractionType,
+  getWaterloggedRoadsType,
+  getYardSitesType
 } from '@/api/globalMap/layerAnalysis';
 import { option4, option5 } from './echartOptions';
 import BigNumber from 'bignumber.js';
@@ -52,10 +71,20 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {});
+let colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
 let dataList = ref([]);
+let legendData = ref([]);
 let chartOption1 = reactive(option4);
 let chartOption2 = reactive(option5);
 
+const getColor = (index) => {
+  if (colorList[index]) {
+    return colorList[index];
+  } else {
+    return '#edf2fa';
+  }
+};
+
 // 得到选中的标签的类型
 const getOption = (data, key = 'dataType') => {
   if (!data) {
@@ -152,19 +181,6 @@ watch(
       }
     });
     // 类型统计
-    const legend = {
-      icon: 'circle',
-      orient: 'vertical',
-      data: [],
-      left: 430,
-      bottom: 150,
-      align: 'left',
-      textStyle: {
-        color: '#fff',
-        fontSize: 32
-      },
-      itemGap: 20
-    };
     if (checkedData.length === 1) {
       let methodList = {
         '1': getEmergencyExpertType,
@@ -198,29 +214,17 @@ watch(
       let method = methodList[dataList.value[0].dataType];
       if (!method) return;
       method().then((res) => {
-        const legendData = [legend];
-        let i = 0;
-        res.rows.forEach((item) => {
-          if (legendData[i].data.length === 5) {
-            i++;
-            legendData[i] = legend;
-          }
-          legendData[i].data.push(item.name);
-        });
-        chartOption2.legend = legendData;
+        legendData.value = res.rows;
+        chartOption2.legend = { show: false };
         chartOption2.series[0].data = res.rows;
       });
     } else {
-      const legendData = [legend];
-      let i = 0;
+      const tempData = [];
       checkedData.forEach((item) => {
-        if (legendData[i].data.length === 5) {
-          i++;
-          legendData[i] = legend;
-        }
-        legendData[i].data.push(item.name);
+        tempData.push(item);
       });
-      chartOption2.legend = legendData;
+      legendData.value = tempData;
+      chartOption2.legend = { show: false };
       chartOption2.series[0].data = checkedData;
     }
   },
@@ -303,5 +307,30 @@ const handleClick = (item) => {
     font-size: 44px;
     color: #f4f7fa;
   }
+  .box2-right {
+    width: 100%;
+    height: 422px;
+    margin-top: 60px;
+    display: flex;
+    align-items: flex-start;
+    .legend-box {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      .legend-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        margin-right: 20px;
+      }
+      .dot {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin-right: 15px;
+      }
+    }
+  }
 }
 </style>