1

YM

2024-06-06 c56935d7085725e609d926b064c146f3ffc29e6e

 src/pages/inherit/list.vue

@@ -132,69 +132,71 @@
        identifier: this.idIndex,
        socialFlag: true
      }).then((res) => {
        let data = res.object;
        this.dataList = res.object;
        // 处理节点颜色
        this.links = [];
        for (let i = 0; i < data.edgeList.length; i++) {
          const linkItem = data.edgeList[i];
          const index = data.nodeList.findIndex(
            (item) =>
              item.identifier ==
              (linkItem.endId == this.idIndex
                ? linkItem.startId
                : linkItem.endId)
          );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#F8E2D7";
            data.nodeList[index].borderColor = "#F3AA78";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#ecf4fe";
            data.nodeList[index].borderColor = "#597aa5";
          }
          this.links.push({
            source: data.nodeList.find(
              (item) => item.identifier == linkItem.startId
            ).name,
            target: data.nodeList.find(
              (item) => item.identifier == linkItem.endId
            ).name,
            relationType: linkItem.relationType,
            label: {
              show: true,
              formatter: function (params) {
                // 使用函数动态生成标签内容
                // return relationships.find(rel => rel.source === nodes[params.data
                //       .source] && rel.target === nodes[params.data.target])
                //    .relation;
                return linkItem.relation;
              }, // 设置关系标签内容为"Child-Parent"
              color: "#2C2C2C",
              fontSize: 16,
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [3, 8],
              borderRadius: 30,
              position: "middle", // 设置标签文本在线的中间位置上居中显示
              // z: -1, // 设置标签的z轴高度，使其比连接线更高
              distance: -10 // 将标签放置在连接线上
            }
          });
        }
        this.dataList = [];
        this.dataList = data.nodeList.map((item) => {
          return {
            ...item,
            itemStyle: {
              color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
              borderColor:
                item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderWidth: "3"
            }
          };
        });
        this.initBarChart(this.dataList, this.links);
        // this.links = [];
        // for (let i = 0; i < data.edgeList.length; i++) {
        //   const linkItem = data.edgeList[i];
        //   const index = data.nodeList.findIndex(
        //     (item) =>
        //       item.identifier ==
        //       (linkItem.endId == this.idIndex
        //         ? linkItem.startId
        //         : linkItem.endId)
        //   );
        //   if (linkItem.relationType == "亲属关系") {
        //     data.nodeList[index].linkType = 1;
        //     data.nodeList[index].color = "#F8E2D7";
        //     data.nodeList[index].borderColor = "#F3AA78";
        //   }
        //   if (linkItem.relationType == "社会关系") {
        //     data.nodeList[index].linkType = 2;
        //     data.nodeList[index].color = "#ecf4fe";
        //     data.nodeList[index].borderColor = "#597aa5";
        //   }
        //   this.links.push({
        //     source: data.nodeList.find(
        //       (item) => item.identifier == linkItem.startId
        //     ).name,
        //     target: data.nodeList.find(
        //       (item) => item.identifier == linkItem.endId
        //     ).name,
        //     relationType: linkItem.relationType,
        //     label: {
        //       show: true,
        //       formatter: function (params) {
        //         // 使用函数动态生成标签内容
        //         // return relationships.find(rel => rel.source === nodes[params.data
        //         //       .source] && rel.target === nodes[params.data.target])
        //         //    .relation;
        //         return linkItem.relation;
        //       }, // 设置关系标签内容为"Child-Parent"
        //       color: "#2C2C2C",
        //       fontSize: 16,
        //       backgroundColor: "rgba(255, 255, 255, 1)",
        //       padding: [3, 8],
        //       borderRadius: 30,
        //       position: "middle", // 设置标签文本在线的中间位置上居中显示
        //       // z: -1, // 设置标签的z轴高度，使其比连接线更高
        //       distance: -10 // 将标签放置在连接线上
        //     }
        //   });
        // }
        // this.dataList = data.nodeList.map((item) => {
        //   return {
        //     ...item,
        //     itemStyle: {
        //       color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
        //       borderColor:
        //         item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
        //       borderWidth: "3"
        //     }
        //   };
        // });
        setTimeout(() => {
          this.initBarChart();
        }, 50);
        
      });

      // 世医文化
@@ -228,7 +230,7 @@
        }, 50);
      }
    },
    initBarChart(dataList, links) {
    initBarChart() {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -268,8 +270,7 @@
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            type: "tree",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
@@ -280,25 +281,19 @@
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: dataList,
            links: links,
            data: [this.dataList],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400
            }
            },
            expandAndCollapse: false,
          }
        ]
      };