三大-图例

src/store/groupEvolution/index.js

@@ -210,9 +210,13 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
 
       // 定义明确的群体顺序
       const groupOrder = ["群体一", "群体二", "群体三"]
-      groupOrder.forEach(key => {
+      groupOrder.forEach((key) => {
         if (res.data.data[key]) {
-          resultObj["seriesList"].push({ name: key, themeColor: themeMap[key], data: res.data.data[key] })
+          resultObj["seriesList"].push({
+            name: key,
+            themeColor: themeMap[key],
+            data: res.data.data[key]
+          })
         }
       })
       this.chartData = resultObj
@@ -693,7 +697,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
         fontSize: 12,
         opacity: 0.8
       }
-    ],
+    ]
   }),
   actions: {
     // 获取时间轴
@@ -1158,9 +1162,9 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
       const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
       const yAxisRange = res.data.yaxisRange
       const themeColors = {
-        社团一: "#2AB8FD",
+        社团一: "#00d6da",
-        社团二: "#02D7DA",
+        社团二: "#fddc33",
-        社团三: "#FFDA09"
+        社团三: "#32b6fb"
       }
       const seriesList = res.data.seriesList.map((item) => ({
         data: item.data.map((item) => item.toFixed(2)),

src/views/GroupEvolution/components/groupGraph.vue

@@ -3,13 +3,13 @@
     <img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
     <div class="container" id="container"></div>
 
-    <div class="legends" v-show="storeId == 'anomalousGroup'">
+    <div class="legends" style="top: 55%" v-show="storeId == 'anomalousGroup'">
       <div class="legend-item" v-for="item in legendsMap.abnormalGroup" :key="item.text">
         <img class="legend-icon" :src="item.icon" />
         <div class="legend-text">{{ item.text }}</div>
       </div>
     </div>
-    <div class="legends" v-show="!(storeId == 'anomalousGroup')">
+    <div class="legends" style="top: 60%" v-show="!(storeId == 'anomalousGroup')">
       <div class="legend-item" v-for="item in legendsMap.normalGroup" :key="item.text">
         <img class="legend-icon" :src="item.icon" />
         <div class="legend-text">{{ item.text }}</div>
@@ -41,7 +41,6 @@ import group2Leg from "@/assets/images/groupEvolution/legends-group2.png"
 import group3Leg from "@/assets/images/groupEvolution/legends-group3.png"
 import abnormalLeg from "@/assets/images/groupEvolution/legends-abnormal-group.png"
 
-
 const props = defineProps({
   store: {
     required: true
@@ -49,15 +48,15 @@ const props = defineProps({
 })
 const legendsMap = {
   normalGroup: [
-    { icon: group1Leg, text: '群体一' },
+    { icon: group1Leg, text: "群体一" },
-    { icon: group2Leg, text: '群体二' },
+    { icon: group2Leg, text: "群体二" },
-    { icon: group3Leg, text: '群体三' },
+    { icon: group3Leg, text: "群体三" }
   ],
   abnormalGroup: [
-    { icon: group1Leg, text: '社团组一' },
+    { icon: group1Leg, text: "社团组一" },
-    { icon: group2Leg, text: '社团组二' },
+    { icon: group2Leg, text: "社团组二" },
-    { icon: group3Leg, text: '社团组三' },
+    { icon: group3Leg, text: "社团组三" },
-    { icon: abnormalLeg, text: '疑似异常社团' },
+    { icon: abnormalLeg, text: "疑似异常社团" }
   ]
 }
 const emit = defineEmits(["click:pointerDownAndSlide"])
@@ -398,11 +397,18 @@ watch(
     width: 160px;
     height: auto; /* 高度自适应内容 */
     right: 2%;
-    top: 60%;
+    background: linear-gradient(
-    background: linear-gradient(286.05deg, rgba(0, 82, 125, 0.48) 32.99%, rgba(0, 200, 255, 0.2304) 233.73%);
+      286.05deg,
+      rgba(0, 82, 125, 0.48) 32.99%,
+      rgba(0, 200, 255, 0.2304) 233.73%
+    );
     border: 1px solid;
     border-radius: 5px;
-    border-image-source: linear-gradient(153.08deg, rgba(183, 222, 255, 0.32) 3.37%, rgba(58, 161, 248, 0.064) 83.16%);
+    border-image-source: linear-gradient(
+      153.08deg,
+      rgba(183, 222, 255, 0.32) 3.37%,
+      rgba(58, 161, 248, 0.064) 83.16%
+    );
     padding: 10px; /* 添加内边距 */
     gap: 10px; /* 设置项间距 */
     .legend-item {