feat(关系图): 优化关系图交互并增加点击高亮功能

- 增加点击表格行高亮相关节点的功能
- 优化关系图布局和样式，根据选中状态调整参数
- 为图表元素添加指针样式提升交互体验
- 清理调试用的console.log语句
- 扩展颜色数组和月份选项

src/views/shanghaiStreetMapDasai.vue

@@ -485,15 +485,15 @@ const navigation = ref({
 // 在modules加入要使用的模块
 const modules = [Autoplay, Pagination, Navigation, Scrollbar];
 const prevEl = () => {
-  console.log("上一张");
+  // console.log("上一张");
 };
 const nextEl = () => {
-  console.log("下一张");
+  // console.log("下一张");
 };
 // 更改当前活动swiper
 const onSlideChange = (swiper: any) => {
   // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
-  console.log(swiper.activeIndex, "活动swiper更改");
+  // console.log(swiper.activeIndex, "活动swiper更改");
 };
 
 const swiperBoxHeight = ref("300px");
@@ -555,35 +555,35 @@ const monthOptions = [
     value: "5",
     label: "五月",
   },
-  // {
+  {
-  //   value: "6",
+    value: "6",
-  //   label: "六月",
+    label: "六月",
-  // }
+  }
-  // ,
+  ,
-  // {
+  {
-  //   value: "7",
+    value: "7",
-  //   label: "七月",
+    label: "七月",
-  // },
+  },
-  // {
+  {
-  //   value: "8",
+    value: "8",
-  //   label: "八月",
+    label: "八月",
-  // },
+  },
-  // {
+  {
-  //   value: "9",
+    value: "9",
-  //   label: "九月",
+    label: "九月",
-  // },
+  },
-  // {
+  {
-  //   value: "10",
+    value: "10",
-  //   label: "十月",
+    label: "十月",
-  // },
+  },
-  // {
+  {
-  //   value: "11",
+    value: "11",
-  //   label: "十一月",
+    label: "十一月",
-  // },
+  },
-  // {
+  {
-  //   value: "12",
+    value: "12",
-  //   label: "十二月",
+    label: "十二月",
-  // },
+  },
 ];
 
 //下拉框"市区"值
@@ -664,15 +664,26 @@ const districtOptions = [
 const webPageBackgroundColor = "#F0F0F0";
 //图表颜色
 const echartsColorArray = [
-  "#5470c6",
+  '#5470C6',
-  "#91cc75",
+  '#91CC75',
-  "#fac858",
+  '#FAC858',
-  "#ee6666",
+  '#EE6666',
-  "#73c0de",
+  '#73C0DE',
-  "#3ba272",
+  '#3BA272',
-  "#fc8452",
+  '#FC8452',
-  "#9a60b4",
+  '#9A60B4',
-  "#ea7ccc",
+  '#EA7CCC',
+  '#27727B',
+  '#FE8463',
+  '#9BCA63',
+  '#FAD860',
+  '#F3A43B',
+  '#60C0DD',
+  '#D7504B',
+  '#C6E579',
+  '#F4E001',
+  '#F0805A',
+  '#26C0C0'
 ];
 // const echartsColorArray = ['#FF00FF', '#00FF00'];
 
@@ -1576,7 +1587,7 @@ const echarts2 = () => {
   var svg = d3
     .select(main2.value)
     .append("svg")
-    .attr("width", windowWidth.value * 0.23)
+    .attr("width", windowWidth.value * 0.24)
     .attr("height", (windowHeight.value - 100 - 3 * 4) / 3);
 
   // 创建布局
@@ -1648,6 +1659,7 @@ const echarts2 = () => {
       return echartsColorArray[randomIndex];
     })
     .style("opacity", 0.7)
+    .style("cursor", "pointer")
     // 鼠标悬停事件
     .on("mousemove", function (event, d: any) {
       isTooltipVisible.value = true;
@@ -1659,6 +1671,8 @@ const echarts2 = () => {
       tooltip.transition().duration(200).style("opacity", 0.9);
       tooltip
         .html(d.data.name + "：" + d.data.value)
+        .style("color", "gray")
+        .style("border", "1px solid " + echartsColorArray[Math.floor(Math.random() * echartsColorArray.length)])
         .style("left", x + "px") // 设置 tooltip 的位置为左侧
         .style("top", y + "px"); // 设置 tooltip 的垂直位置
     })
@@ -1745,7 +1759,7 @@ const echarts2 = () => {
     svg
       .append("text")
       .attr("class", "subtitle")
-      .attr("x", 5) // 根据需要调整副标题的水平位置
+      .attr("x", 0) // 根据需要调整副标题的水平位置
       .attr(
         "y",
         ((windowHeight.value - 100 - 3 * 4) / 3 - 198) / 2 + 78 + 14 * index
@@ -3613,6 +3627,9 @@ const initStreetChart = () => {
 
 // 新增初始化方法
 const initRelationshipChart = () => {
+  if (chartRelationship) {
+    chartRelationship.dispose();
+  }
   // return;
   const chartDom = main9.value;
   if (!chartDom) return;
@@ -3620,24 +3637,60 @@ const initRelationshipChart = () => {
   chartRelationship = echarts.init(chartDom);
 
   getRelationshipNetwork().then((res) => {
+    let nodes;
+    let links;
     // 处理节点数据，为每个节点设置初始样式
-    const nodes = res.data.nodes.map((node: any) => ({
+    if (handleRowValue.value == "") {
-      ...node,
+      // 处理连线数据，为每条连线设置初始样式
-      symbolSize: 10, // 节点大小
+      links = res.data.links.map((link: any) => ({
-      value: 15, // 节点权重（可用于布局）
+        ...link,
-      draggable: false, // 节点不可拖动
+        lineStyle: {
-      itemStyle: {
+          opacity: 0.3, // 连线初始透明度
-        opacity: 0.8, // 节点初始透明度
+        },
-      },
+      }));
-    }));
 
-    // 处理连线数据，为每条连线设置初始样式
+      nodes = res.data.nodes.map((node: any) => ({
-    const links = res.data.links.map((link: any) => ({
+        ...node,
-      ...link,
+        symbolSize: 10, // 节点大小
-      lineStyle: {
+        value: 15, // 节点权重（可用于布局）
-        opacity: 0.3, // 连线初始透明度
+        draggable: false, // 节点不可拖动
-      },
+        itemStyle: {
-    }));
+          opacity: 0.8, // 节点初始透明度
+        },
+      }));
+    } else {
+
+      // 处理连线数据，为每条连线设置初始样式
+      links = res.data.links.filter((link: any) => link.target === handleRowValue.value || link.source === handleRowValue.value)
+        .map((link: any) => ({
+          ...link,
+          lineStyle: {
+            opacity: 1, // 连线初始透明度
+          },
+        }))
+
+      nodes = res.data.nodes
+        // 筛选出存在于任何连线中的节点
+        .filter((node: any) =>
+          links.some(link =>
+            link.target === node.name || link.source === node.name
+          )
+        )
+        // 为筛选后的节点设置样式
+        .map((node: any) => ({
+          ...node,
+          symbolSize: 10, // 节点大小
+          value: 15, // 节点权重（可用于布局）
+          draggable: false, // 节点不可拖动
+          itemStyle: {
+            opacity: 0.8, // 节点初始透明度
+          },
+        }));
+
+    }
+
+
+    // console.log(nodes, links, "------------");
 
     // ECharts 配置项
     const option: echarts.EChartsOption = {
@@ -3660,10 +3713,10 @@ const initRelationshipChart = () => {
         {
           type: "graph", // 图类型为关系图
           layout: "force", // 使用力引导布局
-          zoom: 0.8,
+          zoom: handleRowValue.value == "" ? 0.8 : 1.2,
           force: {
             repulsion: 1000, // 节点之间的斥力
-            edgeLength: 1000, // 边的长度
+            edgeLength: handleRowValue.value == "" ? 1000 : 200, // 边的长度
             gravity: 10, // 重力系数
           },
           emphasis: {
@@ -4279,15 +4332,19 @@ const highlightGraphNodeByName = (nodeName: string) => {
     name: nodeName,
   });
 };
-
+const handleRowValue = ref("");
 const handleRowClick = (item: any, index: number) => {
-  console.log(item, index);
+  // console.log(item, index);
 
   // 将当前行数据移到首行
   if (index !== 0) {
     jubaoGaofaData.value.splice(index, 1); // 删除当前行
     jubaoGaofaData.value.unshift(item);    // 插入到首行
   }
+
+  handleRowValue.value = "投诉举报-" + item.huanjie.slice(0, 2) + "-" + item.zhonglei;
+  console.log(handleRowValue.value);
+  initRelationshipChart();
 };
 
 
@@ -4435,6 +4492,7 @@ const handleFancyClick = (e: MouseEvent) => {
   overflow: hidden;
   background: rgba(0, 0, 0, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
 }
 
 .scroll-item {