From 0b728495e801a874026a766723835be2eaba7833 Mon Sep 17 00:00:00 2001
From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com>
Date: Mon, 4 Aug 2025 16:18:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BE=A4=E4=BD=93=E7=83=9F?=
 =?UTF-8?q?=E8=8A=B1=E5=88=86=E6=9E=90=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/groupEvolution/index.js             |  49 +------
 .../GroupEvolution/component/groupChart.vue   | 128 ++++++++++--------
 .../GroupEvolution/component/groupPanel.vue   |  16 ++-
 .../GroupEvolution/component/groupShow.vue    |  51 ++++---
 .../components/attentionTopic.vue             |   1 -
 5 files changed, 122 insertions(+), 123 deletions(-)

diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js
index 6222ba2..37810c3 100644
--- a/src/store/groupEvolution/index.js
+++ b/src/store/groupEvolution/index.js
@@ -1,5 +1,4 @@
 import { defineStore } from "pinia"
-import testAvatar from "@/assets/images/leader/chenchen.png"
 import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png"
 import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png"
 import splitImg from "@/assets/images/groupMember/splitImg.png"
@@ -13,46 +12,28 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
       {
         id: 1,
         type: "群体一",
+        title: "关注话题：#中国海警首次登检菲律宾运补船只#",
         statistics: [
           { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
           { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ],
-        mediaList: [
-          { id: 1, name: "胡锡进", avatar: testAvatar },
-          { id: 2, name: "胡锡进", avatar: testAvatar },
-          { id: 3, name: "胡锡进", avatar: testAvatar },
-          { id: 4, name: "胡锡进", avatar: testAvatar },
-          { id: 5, name: "胡锡进", avatar: testAvatar }
         ]
       },
       {
         id: 2,
         type: "群体二",
+        title: "关注话题：#外交部回应中国海警缴获菲律宾士111111.",
         statistics: [
           { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
           { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ],
-        mediaList: [
-          { id: 1, name: "胡锡进", avatar: testAvatar },
-          { id: 2, name: "胡锡进", avatar: testAvatar },
-          { id: 3, name: "胡锡进", avatar: testAvatar },
-          { id: 4, name: "胡锡进", avatar: testAvatar },
-          { id: 5, name: "胡锡进", avatar: testAvatar }
         ]
       },
       {
         id: 3,
         type: "群体三",
+        title: "关注话题：#美军机在南海盘旋并投放不明物体#",
         statistics: [
           { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
           { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ],
-        mediaList: [
-          { id: 1, name: "胡锡进", avatar: testAvatar },
-          { id: 2, name: "胡锡进", avatar: testAvatar },
-          { id: 3, name: "胡锡进", avatar: testAvatar },
-          { id: 4, name: "胡锡进", avatar: testAvatar },
-          { id: 5, name: "胡锡进", avatar: testAvatar }
         ]
       }
     ],
@@ -62,35 +43,17 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
       seriesList: [
         {
           name: "头部自媒体",
-          type: "line",
-          lineStyle: {
-            color: "#33b6fb",
-            width: 1 // 设置线条宽度为3像素
-          },
-          symbolSize: 10, // 圆点大小
-          borderWidth: 1, // 边框宽度
+          themeColor: "#32b6fb",
           data: [200, 300, 330, 400, 380]
         },
         {
           name: "官方媒体",
-          type: "line",
-          lineStyle: {
-            width: 1,
-            color: "#00d6da" // 折线颜色
-          },
-          symbolSize: 10, // 圆点大小
-          borderWidth: 1, // 边框宽度
+          themeColor: "#00d6da",
           data: [100, 200, 230, 300, 280]
         },
         {
           name: "普通自媒体",
-          type: "line",
-          lineStyle: {
-            width: 1,
-            color: "#fddc33" // 折线颜色
-          },
-          symbolSize: 10, // 圆点大小
-          borderWidth: 1, // 边框宽度
+          themeColor: "#fddc33",
           data: [300, 400, 430, 500, 480]
         }
       ]
diff --git a/src/views/GroupEvolution/component/groupChart.vue b/src/views/GroupEvolution/component/groupChart.vue
index 1408777..7fe20e4 100644
--- a/src/views/GroupEvolution/component/groupChart.vue
+++ b/src/views/GroupEvolution/component/groupChart.vue
@@ -2,7 +2,7 @@
   <div class="groupChart-component">
     <img :src="title" alt="" class="title" v-if="title" />
     <div class="chart-name" v-if="chartName">
-      <img class="name-icon" src="@/assets/images/groupEvolution/chart-name-icon.png" alt="">
+      <img class="name-icon" src="@/assets/images/groupEvolution/chart-name-icon.png" alt="" />
       <span>{{ chartName }}</span>
     </div>
     <div class="container" :id="chartId"></div>
@@ -17,10 +17,10 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue";
-import * as echarts from "echarts";
+import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"
+import * as echarts from "echarts"
 
-let chartInstance = null;
+let chartInstance = null
 const props = defineProps({
   title: {
     type: String,
@@ -34,36 +34,36 @@ const props = defineProps({
     type: String,
     default: ""
   }
-});
+})
 
 // 生成唯一ID，避免多个实例冲突
-const chartId = computed(() => `group-chart-${Math.random().toString(36).substring(2, 9)}`);
+const chartId = computed(() => `group-chart-${Math.random().toString(36).substring(2, 9)}`)
 
-const sliderLeft = ref(25); // 滑块初始left
-const sliderWidth = 24; // 滑块宽度
-const sliderContainerWidth = ref(0); // 容器宽度
-let isDragging = false;
-let startX = 0;
-let startLeft = 0;
+const sliderLeft = ref(50) // 滑块初始left
+const sliderWidth = 24 // 滑块宽度
+const sliderContainerWidth = ref(0) // 容器宽度
+let isDragging = false
+let startX = 0
+let startLeft = 0
 
 const onMouseDown = (e) => {
-  isDragging = true;
-  startX = e.clientX;
-  startLeft = sliderLeft.value;
-  document.addEventListener("mousemove", onMouseMove);
-  document.addEventListener("mouseup", onMouseUp);
-};
+  isDragging = true
+  startX = e.clientX
+  startLeft = sliderLeft.value
+  document.addEventListener("mousemove", onMouseMove)
+  document.addEventListener("mouseup", onMouseUp)
+}
 
 const onMouseMove = (e) => {
-  if (!isDragging) return;
-  const deltaX = e.clientX - startX;
-  let newLeft = startLeft + deltaX;
-  newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth));
-  sliderLeft.value = newLeft;
+  if (!isDragging) return
+  const deltaX = e.clientX - startX
+  let newLeft = startLeft + deltaX
+  newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth))
+  sliderLeft.value = newLeft
 
   // 计算当前滑块对应的x轴索引
-  const percent = newLeft / (sliderContainerWidth.value - sliderWidth);
-  const xIndex = Math.round(percent * (props.chartData.xAxisData.length - 1));
+  const percent = newLeft / (sliderContainerWidth.value - sliderWidth)
+  const xIndex = Math.floor(percent * (props.chartData.xAxisData.length - 1))
 
   // 调用ECharts显示tooltip
   if (chartInstance) {
@@ -71,24 +71,20 @@ const onMouseMove = (e) => {
       type: "showTip",
       seriesIndex: 0, // 只显示第一个系列的tooltip
       dataIndex: xIndex
-    });
+    })
   }
-};
+}
 
 const onMouseUp = () => {
-  isDragging = false;
-  document.removeEventListener("mousemove", onMouseMove);
-  document.removeEventListener("mouseup", onMouseUp);
-};
+  isDragging = false
+  document.removeEventListener("mousemove", onMouseMove)
+  document.removeEventListener("mouseup", onMouseUp)
+}
 
 const initChart = () => {
   // 使用唯一ID初始化图表
-  chartInstance = echarts.init(document.getElementById(chartId.value));
-  const legendData = props.chartData.seriesList.map((item) => ({
-    name: item.name,
-    icon: "circle"
-  }));
-
+  chartInstance = echarts.init(document.getElementById(chartId.value))
+  const legendData = props.chartData.seriesList.map((item) => item.name)
   const option = {
     tooltip: {
       trigger: "axis"
@@ -99,7 +95,8 @@ const initChart = () => {
       top: 13,
       textStyle: {
         color: "#fff"
-      }
+      },
+      icon: "circle" // 使用圆形图标
     },
     tooltip: {
       trigger: "axis",
@@ -112,7 +109,7 @@ const initChart = () => {
           头部自媒体: "#33b6fb",
           官方媒体: "#00d6da",
           普通自媒体: "#fddc33"
-        };
+        }
         const listHtml = params
           .map(
             (item) => `
@@ -143,7 +140,7 @@ const initChart = () => {
           </div>
         `
           )
-          .join("");
+          .join("")
         return `
       <div style="
         width:150px;
@@ -154,7 +151,7 @@ const initChart = () => {
       ">
         ${listHtml}
       </div>
-    `;
+    `
       }
     },
     grid: {
@@ -166,12 +163,14 @@ const initChart = () => {
     },
     xAxis: {
       type: "category",
-      boundaryGap: false,
+      boundaryGap: true,
       data: props.chartData.xAxisData,
       axisLabel: {
-        textStyle: {
-          color: "#94C1EC"
-        }
+        color: "#94C1EC",
+        interval: 0
+      },
+      axisTick: {
+        show: false
       }
     },
     yAxis: {
@@ -200,26 +199,41 @@ const initChart = () => {
         }
       }
     },
-    series: props.chartData.seriesList
-  };
-  chartInstance.setOption(option);
-};
+    series: props.chartData.seriesList.map((series) => ({
+      ...series,
+      type: "line",
+      itemStyle: {
+        color: "#061a2f",
+        borderColor: series.themeColor, // 使用线条颜色作为边框色
+        borderWidth: 2
+      },
+      symbol: "circle",
+      symbolSize: 10,
+      // 确保lineStyle存在
+      lineStyle: {
+        color: series.themeColor,
+        width: 1
+      }
+    }))
+  }
+  chartInstance.setOption(option)
+}
 
 onMounted(() => {
-  initChart();
+  initChart()
   // 获取容器宽度
-  sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth;
-});
+  sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
+})
 
 onBeforeUnmount(() => {
   // 销毁图表实例，避免内存泄漏
   if (chartInstance) {
-    chartInstance.dispose();
-    chartInstance = null;
+    chartInstance.dispose()
+    chartInstance = null
   }
-  document.removeEventListener("mousemove", onMouseMove);
-  document.removeEventListener("mouseup", onMouseUp);
-});
+  document.removeEventListener("mousemove", onMouseMove)
+  document.removeEventListener("mouseup", onMouseUp)
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/views/GroupEvolution/component/groupPanel.vue b/src/views/GroupEvolution/component/groupPanel.vue
index 3dc27d6..f2fd19c 100644
--- a/src/views/GroupEvolution/component/groupPanel.vue
+++ b/src/views/GroupEvolution/component/groupPanel.vue
@@ -10,7 +10,9 @@
             alt=""
           />
           <div class="group-item-title-type">{{ group.type }}</div>
+          <div class="title-content">{{ group.title }}</div>
         </div>
+
         <div class="group-item-statistics">
           <div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id">
             <img :src="statistic.iconImg" alt="" class="sta-prefix" />
@@ -77,13 +79,25 @@ const props = defineProps({
           left: 8px;
           font-size: 14px;
         }
+        .title-content {
+          width: 100%;
+          color: #fff;
+          font-family: "PingFang SC";
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          margin-top: 10px;
+          white-space: nowrap; /* 强制不换行 */
+          overflow: hidden; /* 隐藏溢出内容 */
+          text-overflow: ellipsis; /* 显示省略号 */
+        }
       }
       .group-item-statistics {
         width: 80%;
         height: 40px;
         display: flex;
         justify-content: space-between;
-        margin-top: 20px;
+        margin-top: 10px;
         .statistics-item {
           display: flex;
           align-items: center;
diff --git a/src/views/GroupEvolution/component/groupShow.vue b/src/views/GroupEvolution/component/groupShow.vue
index 8ae8e7b..59b3560 100644
--- a/src/views/GroupEvolution/component/groupShow.vue
+++ b/src/views/GroupEvolution/component/groupShow.vue
@@ -16,16 +16,16 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted } from "vue";
-import * as echarts from "echarts";
+import { defineProps, onMounted } from "vue"
+import * as echarts from "echarts"
 const chartTitleList = [
   { id: 1, name: "头部自媒体 增量速率" },
   { id: 2, name: "官方媒体 增量速率" },
   { id: 3, name: "普通自媒体 增量速率" }
-];
-let chartInstance1 = null;
-let chartInstance2 = null;
-let chartInstance3 = null;
+]
+let chartInstance1 = null
+let chartInstance2 = null
+let chartInstance3 = null
 const props = defineProps({
   title: {
     type: String,
@@ -35,14 +35,14 @@ const props = defineProps({
     type: Object,
     default: () => {}
   }
-});
+})
 
 const optionHandle = ({ xAxis, yAxis, data }, flag) => {
   const lineColors = {
     "头部自媒体 增量速率": "#2AB8FD",
     "官方媒体 增量速率": "#01D7DA",
     "普通自媒体 增量速率": "#FFDA09"
-  };
+  }
   return {
     tooltip: {
       trigger: "axis"
@@ -56,12 +56,15 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
     },
     xAxis: {
       type: "category",
-      boundaryGap: false,
+      boundaryGap: true,
       data: xAxis,
       axisLabel: {
         textStyle: {
           color: "#94C1EC"
         }
+      },
+      axisTick: {
+        show: false
       }
     },
     yAxis: {
@@ -95,29 +98,35 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
         type: "line",
         stack: "Total",
         symbolSize: 10, // 圆点大小
-        borderWidth: 1, // 边框宽度
+        symbol: "circle",
         color: lineColors[flag],
         lineStyle: {
+          color: lineColors[flag],
           width: 1 // 设置线条宽度为3像素
         },
+        itemStyle: {
+          color: "#061a2f",
+          borderColor: lineColors[flag], // 使用线条颜色作为边框色
+          borderWidth: 1
+        },
         data: data
       }
     ]
-  };
-};
+  }
+}
 
 const initCharts = () => {
-  chartInstance1 = echarts.init(document.getElementById("container1"));
-  chartInstance2 = echarts.init(document.getElementById("container2"));
-  chartInstance3 = echarts.init(document.getElementById("container3"));
-  chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"));
-  chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"));
-  chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"));
-};
+  chartInstance1 = echarts.init(document.getElementById("container1"))
+  chartInstance2 = echarts.init(document.getElementById("container2"))
+  chartInstance3 = echarts.init(document.getElementById("container3"))
+  chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"))
+  chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"))
+  chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"))
+}
 
 onMounted(() => {
-  initCharts();
-});
+  initCharts()
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/views/keyNodeRecognition3/components/attentionTopic.vue b/src/views/keyNodeRecognition3/components/attentionTopic.vue
index 0847f64..1378a6f 100644
--- a/src/views/keyNodeRecognition3/components/attentionTopic.vue
+++ b/src/views/keyNodeRecognition3/components/attentionTopic.vue
@@ -91,7 +91,6 @@ const initTopicChart = () => {
         fontSize: 12
       },
       axisLabel: {
-        //	margin:15,
         textStyle: {
           color: "#a8aab0",
           fontStyle: "normal",