修改groupChart

src/store/groupEvolution/index.js

@@ -642,19 +642,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 1, interval: 0.2 },
             seriesList: [
               {
-                name: "",
+                name: "分裂演化",
-                type: "line",
+                themeColor: "#2AB8FD",
-                lineStyle: {
-                  color: "#2AB8FD",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#2AB8FD",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
                 data: [0.9237, 0.14507, 0, 0, 0]
               }
             ]
@@ -668,20 +657,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 25, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "合并演化",
-                type: "line",
+                themeColor: "#02D7DA",
-                lineStyle: {
-                  color: "#01D7DA",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#01D7DA",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [9.8011, 21.3123, 10.4338, 14.1912, 10.1523]
               }
             ]
@@ -695,20 +672,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 2, interval: 0.5 },
             seriesList: [
               {
-                name: "",
+                name: "收缩演化",
-                type: "line",
+                themeColor: "#FFDA09",
-                lineStyle: {
-                  color: "#FFDA09",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#FFDA09",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [1.9057, 1.5123, 1.0338, 0.5912, 0.1523]
               }
             ]
@@ -722,20 +687,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 20, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "扩展演化",
-                type: "line",
+                themeColor: "#EB57B0",
-                lineStyle: {
-                  color: "#EB57B0",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#EB57B0",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [15.1119, 6.5123, 10.6338, 9.5912, 4.1523]
               }
             ]
@@ -751,19 +704,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 1, interval: 0.2 },
             seriesList: [
               {
-                name: "",
+                name: "分裂演化",
-                type: "line",
+                themeColor: "#2AB8FD",
-                lineStyle: {
-                  color: "#2AB8FD",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#2AB8FD",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
                 data: [0.9237, 0.14507, 0, 0, 0]
               }
             ]
@@ -777,20 +719,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 25, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "合并演化",
-                type: "line",
+                themeColor: "#02D7DA",
-                lineStyle: {
-                  color: "#01D7DA",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#01D7DA",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [9.8011, 21.3123, 10.4338, 14.1912, 10.1523]
               }
             ]
@@ -804,20 +734,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 2, interval: 0.5 },
             seriesList: [
               {
-                name: "",
+                name: "收缩演化",
-                type: "line",
+                themeColor: "#FFDA09",
-                lineStyle: {
-                  color: "#FFDA09",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#FFDA09",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [1.9057, 1.5123, 1.0338, 0.5912, 0.1523]
               }
             ]
@@ -831,20 +749,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 20, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "扩展演化",
-                type: "line",
+                themeColor: "#EB57B0",
-                lineStyle: {
-                  color: "#EB57B0",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#EB57B0",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [15.1119, 6.5123, 10.6338, 9.5912, 4.1523]
               }
             ]
@@ -860,19 +766,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 1, interval: 0.2 },
             seriesList: [
               {
-                name: "",
+                name: "分裂演化",
-                type: "line",
+                themeColor: "#2AB8FD",
-                lineStyle: {
-                  color: "#2AB8FD",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#2AB8FD",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
                 data: [0.9237, 0.14507, 0, 0, 0]
               }
             ]
@@ -886,20 +781,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 25, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "合并演化",
-                type: "line",
+                themeColor: "#02D7DA",
-                lineStyle: {
-                  color: "#01D7DA",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#01D7DA",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [9.8011, 21.3123, 10.4338, 14.1912, 10.1523]
               }
             ]
@@ -913,20 +796,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 2, interval: 0.5 },
             seriesList: [
               {
-                name: "",
+                name: "收缩演化",
-                type: "line",
+                themeColor: "#FFDA09",
-                lineStyle: {
-                  color: "#FFDA09",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#FFDA09",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [1.9057, 1.5123, 1.0338, 0.5912, 0.1523]
               }
             ]
@@ -940,20 +811,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
             yAxisRange: { min: 0, max: 20, interval: 5 },
             seriesList: [
               {
-                name: "",
+                name: "扩展演化",
-                type: "line",
+                themeColor: "#EB57B0",
-                lineStyle: {
-                  color: "#EB57B0",
-                  width: 1 // 设置线条宽度为3像素
-                },
-                itemStyle: {
-                  color: "#0A1A2F",
-                  borderColor: "#EB57B0",
-                  borderWidth: 1
-                },
-                symbol: "circle",
-                symbolSize: 10, // 圆点大小
-                borderWidth: 1, // 边框宽度
                 data: [15.1119, 6.5123, 10.6338, 9.5912, 4.1523]
               }
             ]
@@ -1244,35 +1103,17 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
       seriesList: [
         {
           name: "社团组一",
-          type: "bar",
+          themeColor: "#2AB8FD",
-          itemStyle: {
-            color: "#2AB8FD",
-            borderColor: "#2AB8FD",
-            borderWidth: 1,
-            borderRadius: [4, 4, 0, 0] // 顶部圆角
-          },
           data: [0, 5, 4, 3, 0, 5, 0]
         },
         {
           name: "社团组二",
-          type: "bar",
+          themeColor: "#02D7DA",
-          itemStyle: {
-            color: "#02D7DA",
-            borderColor: "#02D7DA",
-            borderWidth: 1,
-            borderRadius: [4, 4, 0, 0] // 顶部圆角
-          },
           data: [3, 0, 1, 0, 3, 5, 0]
         },
         {
           name: "社团组三",
-          type: "bar",
+          themeColor: "#FFDA09",
-          itemStyle: {
-            color: "#FFDA09",
-            borderColor: "#FFDA09",
-            borderWidth: 1,
-            borderRadius: [4, 4, 0, 0] // 顶部圆角
-          },
           data: [5, 0, 4, 0, 3, 0, 0]
         }
       ]

src/views/GroupEvolution/abnormalGroup/index.vue

@@ -7,11 +7,12 @@
       <div class="left-container">
         <div class="userPanel"></div>
         <div class="userChart">
-          <!-- <GroupChart
+          <GroupChart
             :title="userChartTitleImg"
             :moduleName="moduleName"
+            :isAbnormal="true"
             :chartData="anomalousGroupStore.chartData"
-          ></GroupChart> -->
+          ></GroupChart>
         </div>
       </div>
       <div class="middle-container">
@@ -56,10 +57,11 @@
 
 <script setup>
 import { ref } from "vue";
-// import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
+import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
 import { Icon } from "@iconify/vue";
 import WordsCloud from "../component/wordsCloud.vue"
 import GroupPost from "../component/groupPost.vue"
+import GroupChart from "../component/groupChart.vue"
 // import AnomalousContentInfo from "./components/anomalousContentInfo.vue"
 import { useAnomalousGroup } from "@/store/groupEvolution/index";
 

src/views/GroupEvolution/component/groupChart.vue

@@ -37,6 +37,10 @@ const props = defineProps({
   moduleName: {
     type: String,
     default: ""
+  },
+  isAbnormal: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -146,6 +150,13 @@ const initChart = () => {
             扩展指数: "#EB57B0"
           }
         }
+        if(props.moduleName == "异常行为分析"){
+          color = {
+            社团组一: "#2AB8FD",
+            社团组二: "#02D7DA",
+            社团组三: "#FFDA09",
+          }
+        }
         const listHtml = params
           .map(
             (item) => `
@@ -235,7 +246,8 @@ const initChart = () => {
         }
       }
     },
-    series: props.chartData.seriesList.map((series) => ({
+    // 判断是否为异常群体模块：isAbnormal默认为false===>正常模块:异常群体模块
+    series: !props.isAbnormal ? props.chartData.seriesList.map((series) => ({
       ...series,
       type: "line",
       itemStyle: {
@@ -251,6 +263,16 @@ const initChart = () => {
         width: 1
       }
     }))
+    : props.chartData.seriesList.map((series) => ({
+      ...series,
+      type: "bar",
+      itemStyle: {
+        color: series.themeColor,
+        borderColor: series.themeColor, // 使用线条颜色作为边框色
+        borderWidth: 1,
+        borderRadius: [8,8,0,0]
+      }
+    }))
   }
   chartInstance.setOption(option)
 }

src/views/GroupEvolution/groupMember/components/groupAnalysis.vue

@@ -19,6 +19,7 @@
              v-for="item in curSelectedTabData"
             :key="item.id"
             :chartName="item.name"
+            :moduleName="moduleName"
             :chartData="item.chart"
         ></GroupChart>
       </div>
@@ -32,6 +33,7 @@ import GroupChart from "../../component/groupChart.vue";
 const curSelectedTab = ref("头部自媒体");
 const curSelectedTabData = ref(null);
 const tabs = ["头部自媒体", "官方媒体", "普通自媒体"];
+const moduleName = "群体成员演化分析"
 const props = defineProps({
   title: {
     type: String,