图谱和传承

YM

2024-04-30 f4c14c24cb6cf1ed1c09cab760f6b9c8381df557

图谱和传承

 src/api/index.js

@@ -251,6 +251,14 @@
  });
};

export const searchSchoolPerson = (data) => {
  return req1({
    url: "/person/searchSchoolPerson",
    method: "post",
    params: data
  });
};

// 医事制度
// 数据统计
export const getDataStatistics = () => {

 src/pages/academicGenres/chart.vue

@@ -1,7 +1,9 @@
<template>
  <view>
  <view
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <!-- 顶部导航 -->
    <headNav :idIndex="3" text="历代学术流派" />
    <headNav :idIndex="3 + ''" text="历代学术流派" />
    <view class="Midde flex">
      <!-- <view class="MiddeBack">返回</view> -->
      <el-button class="MiddeBack flex flex-center" @click="goBack"
@@ -30,14 +32,11 @@
          </li>
        </ul>
      </view>
      <view></view>
    </view>
    <view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
      <ul class="flex">
        <li
          class="school1"
          v-for="(item, index) in dynasty"
          :key="item.id"
        >
        <li class="school1" v-for="(item, index) in dynasty" :key="item.id">
          <view
            class="flex flex-center font-family school"
            style="
@@ -68,18 +67,21 @@
        </li>
      </ul>
    </view>
    <view class="Bottom">
      <view id="main" style="width: 100vw; height: 5rem"></view>
    <view class="contentBox">
      <view id="main" style="width: 100%; height: 100%"></view>
    </view>
  </view>
</template>

<script>
import { getIntroduction } from "@/api/index.js";
import { getIntroduction, searchSchoolPerson } from "@/api/index.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      detailData: {},
      nodeData: [],
      links: [],
      // 标题顶部栏需要的东西
      idIndex: 0,
      dynasty: [
@@ -103,17 +105,13 @@
  },
  onLoad(options) {
    this.idIndex = options.id;
    this.getData();
    this.getDetailData();
  },
  methods: {
    getData() {
    getDetailData() {
      getIntroduction(Number(this.idIndex)).then((res) => {
        this.detailData = {
          name: res.object.school_NAME[0].content,
          icon:
            res.object.pictureList && res.object.pictureList.length > 0
              ? getImg(res.object.pictureList[0].filePath)
              : "",
          character: res.object.important_PEOPLE
            ? res.object.important_PEOPLE
                .map((item) => item.content2)
@@ -186,8 +184,60 @@
              })
            : []
        };
        console.log(this.detailData);
        this.getData();
      });
    },
    getData() {
      this.nodeData = [];
      this.links = [];
      const p = this.detailData.character.split("、");
      for (let i = 0; i < p.length; i++) {
        const item = p[i];
        // 代表人物
        this.nodeData.push({
          name: item,
          x: 200 * i,
          y: 200 * i,
          itemStyle: {
            color: "#ecf4fe",
            borderWidth: 4,
            borderColor: "#597aa5",
            borderRadius: 30
          },
          symbolSize: 100
        });
        searchSchoolPerson({
          keyword: item
        }).then((res) => {
          console.log(res.list, i);
          for (let i = 0; i < res.list.length; i++) {
            const citem = res.list[i];
            // 节点
            this.nodeData.push({
              name: citem.name2,
              x: Math.random() * 1000,
              y: Math.random() * 600,
              itemStyle: {
                color: citem.relationType == "人物著作" ? "#eee" : "#FDEFE4",
                borderWidth: 4,
                borderColor:
                  citem.relationType == "人物著作" ? "#9e9e9e" : "#DA7A2B",
                borderRadius: 30
              },
              symbolSize: 100
            });
            // 关系
            this.links.push({
              source: item,
              target: citem.name2,
              label: {
                show: false
              }
            });
          }
          this.init();
        });
      }
    },
    goBack() {
      this.$router.go(-1);
@@ -197,300 +247,70 @@
        url: "/pages/academicGenres/detail?id=" + this.idIndex
      });
    },
    innt() {
      this.$nextTick(() => {
        // var chartDom = document.getElementById('main'); // 获取HTML中的元素，此处假设有一个id为'main'的元素作为图表容器
        // var myChart = echarts.init(chartDom); // 初始化echarts实例，并将其与图表容器绑定
        // var option; // 定义变量option来存储图表的配置项

        // option = {
        //     // title: {
        //     //   text: 'Basic Graph' // 图表标题为'Basic Graph'
        //     // },
        //     tooltip: {}, // 鼠标悬停时显示的提示框
        //     animationDurationUpdate: 1500, // 数据更新时的动画时长
        //     animationEasingUpdate: 'quinticInOut', // 数据更新时的动画效果
        //     series: [{
        //         type: 'graph', // 图表类型为'graph'
        //         layout: 'none', // 图表布局方式为'none'，即节点位置由x和y坐标指定
        //         symbolSize: 150, // 节点的大小
        //         roam: false, // 是否开启漫游，即可以拖动和缩放图表
        //         label: {
        //             show: true, // 是否显示节点上的标签
        //             textStyle: {
        //                 fontSize: 32, // 设置字体大小为12
        //             }
        //         },
        //         edgeSymbol: ['circle', 'arrow'], // 边的起始和结束箭头样式
        //         edgeSymbolSize: [10, 10], // 边的起始和结束箭头大小
        //         edgeLabel: {
        //             fontSize: 40, // 边的标签字体大小

        //         },
        //         data: [{
        //                 name: '金元四大家', // 节点1的名称
        //                 x: 1230, // 节点1的x坐标
        //                 y: 250, // 节点1的y坐标
        //                 itemStyle: {
        //                     color: 'red', // 节点1的背景颜色
        //                 },
        //                 label: {
        //                     color: 'black' // 节点1的字体颜色
        //                 }
        //             },
        //             {
        //                 name: '刘完素', // 节点2的名称
        //                 x: 800, // 节点2的x坐标
        //                 y: 300 // 节点2的y坐标
        //             },
        //             {
        //                 name: '傷寒直格', // 节点3的名称
        //                 x: 550, // 节点3的x坐标
        //                 y: 360 // 节点3的y坐标
        //             },
        //             {
        //                 name: '张仲景', // 节点4的名称
        //                 x: 700, // 节点4的x坐标
        //                 y: 200 // 节点4的y坐标
        //             },
        //             {
        //                 name: '三消論', // 节点4的名称
        //                 x: 750, // 节点4的x坐标
        //                 y: 500 // 节点4的y坐标
        //             },
        //         ],
        //         links: [ // 边的连接关系
        //             {
        //                 source: '金元四大家', // 边的起始节点索引为0，即节点1
        //                 target: '刘完素', // 边的结束节点索引为1，即节点2
        //                 symbolSize: [5, 20], // 边的起始和结束箭头大小
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '包含',
        //                 },
        //                 lineStyle: {
        //                     width: 5, // 边的宽度
        //                     curveness: 0.2 // 边的曲度

        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 2'
        //                 target: '傷寒直格', // 边的结束节点为'Node 1'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '出版物'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2, // 边的曲度

        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 1'
        //                 target: '张仲景', // 边的结束节点为'Node 3'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '评论'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2 // 边的曲度
        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 2'
        //                 target: '三消論', // 边的结束节点为'Node 3'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '出版物'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2 // 边的曲度
        //                 }
        //             }
        //         ],
        //         lineStyle: {
        //             opacity: 0.9, // 边的透明度
        //             width: 2, // 边的宽度
        //             curveness: 0 // 边的曲度
        //         },
        //         textStyle: {
        //             fontSize: 14 // 设置全局文字的字体大小
        //         },
        //     }]
        // };

        // option && myChart.setOption(option); // 将配置项应用于图表实例
        // console.log(myChart);

        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        // 假设您有节点名称和它们之间的关系数据
        var nodes = ["刘完素", "张仲景", "金元四大家", "三消论", "伤寒直格"];
        var relationships = [
    init() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      let FontSize = 12; // 字体大小
      let SymbolSize = 80; // 尺寸距离
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        SymbolSize = 100;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        SymbolSize = 90;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        SymbolSize = 70;
      }
      var option;
      option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            source: "金元四大家",
            target: "刘完素",
            relation: "姻亲"
          },
          {
            source: "刘完素",
            target: "张仲景",
            relation: ""
          },
          {
            source: "刘完素",
            target: "伤寒直格",
            relation: ""
          },
          {
            source: "刘完素",
            target: "三消论",
            relation: ""
          }
          // 其他关系...
        ];

        let FontSize = 12; // 字体大小
        let BorderWidth = 2; // 边框大小
        let SymbolSize = 80; // 尺寸距离
        let Distance = 10;
        // 不同尺寸下修改echarts的字体
        if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
          FontSize = 28;
          BorderWidth = 5;
          SymbolSize = 100;
          Distance = 33;
        } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
          FontSize = 28;
          BorderWidth = 4;
          SymbolSize = 90;
          Distance = 22;
        } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
          FontSize = 18;
          BorderWidth = 4;
          SymbolSize = 70;
          Distance = 22;
        }
        // 根据关系数据生成连接线
        var links = [];
        relationships.forEach(function (relationship) {
          // console.log(relationship,'relationship');
          var sourceIndex = nodes.indexOf(relationship.source);
          var targetIndex = nodes.indexOf(relationship.target);
          var linkObject = {
            source: sourceIndex,
            target: targetIndex
          };
          if (relationship.relation !== "") {
            linkObject.label = {
            type: "graph",
            layout: "none",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
            label: {
              show: true,
              formatter: function (params) {
                return relationship.relation;
              },
              color: "#2C2C2C",
              fontSize: FontSize - 2,
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [11, 20],
              borderRadius: 300,
              position: "middle",
              z: 10,
              distance: -(Distance + 1)
            };
          }
          links.push(linkObject);
          // if (sourceIndex !== -1 && targetIndex !== -1) {
          //     links.push({
          //         source: sourceIndex,
          //         target: targetIndex,
          //         label: {
          //             show: true,
          //             formatter: function(params) { // 使用函数动态生成标签内容
          //                 // console.log(params.data, 'aaaaaaaaaaaa');
          //                 return relationships.find(rel => rel.source === nodes[
          //                         params.data
          //                         .source] && rel.target === nodes[params
          //                         .data.target])
          //                     .relation;
          //             }, // 设置关系标签内容为"Child-Parent"
          //             color: '#2C2C2C',
          //             fontSize: FontSize - 2,
          //             backgroundColor: 'rgba(255, 255, 255, 1)',
          //             padding: [11, 20],
          //             position: 'middle', // 设置标签文本在线的中间位置上居中显示
          //             // bottom: -(FontSize+10),
          //             z: 10, // 设置标签的z轴高度，使其比连接线更高
          //             // offset: [0, 15] ,// 往下移动 10 像素
          //             distance: -(Distance + 1), // 将标签放置在连接线上
          //         }
          //     });
          // }
        });
        // 根据nodes动态生成节点数据
        var nodeData = nodes.map(function (node, index) {
          return {
            name: node,
            x: Math.random() * 1000, // 设置随机x坐标位置
            y: Math.random() * 600, // 设置随机y坐标位置
            itemStyle: {
              color: getColorByIndex(index), // 可以根据索引设置不同的颜色
              borderWidth: BorderWidth + 3,
              borderColor: getColorByIndex(index + 1),
              borderRadius: 30
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            symbolSize: SymbolSize + 50
          };
        });
        // 设置颜色
        function getColorByIndex(index) {
          var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
          return colors[index % colors.length];
        }
        var option;
        option = {
          backgroundColor: {
            type: "image",
            image: "/static/image/characterRelationBg.png",
            repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
            position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: "quinticInOut",
          series: [
            {
              type: "graph",
              layout: "none",
              symbolSize: SymbolSize, // 调整节点大小
              label: {
                show: true,
                color: "black", // 设置节点文字颜色为黑色
                fontSize: FontSize // 设置文字大小
              },
              // edgeSymbol: ['circle'],
              // edgeSymbolSize: [4, 10],
              edgeSymbol: ["circle", "arrow"], // 边的起始和结束箭头样式
              edgeSymbolSize: [20, 20], // 边的起始和结束箭头大小
              data: nodeData,
              links: links,
              lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0.3
              }
            }
          ]
        };
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

        // 将生成的连接线添加到echarts图表的option中
        option.series[0].links = links;
        option && myChart.setOption(option);
      });
            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
              position: "middle",
              //这里设置关系文字是否和线段重叠
              //   padding: [0, 0], // 调整内边距以确保标签与线段紧密贴合
              // verticalAlign: 'middle', // 设置文本的垂直对齐方式为居中
              formatter: function (params) {
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
            },
            //各个节点
            data: this.nodeData, //关系连接
            links: this.links,
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.innt();
  }
};
</script>
@@ -552,4 +372,11 @@
.school1 {
  margin: 0 0.2rem;
}

.contentBox {
  flex: 1;
  background-image: url("@/static/image/characterRelationBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>

 src/pages/character/index.vue

@@ -369,10 +369,8 @@
                padding: [3, 8],
                borderRadius: 30,
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // bottom: -(FontSize+10),
                z: 10, // 设置标签的z轴高度，使其比连接线更高
                // offset: [0, 15] ,// 往下移动 10 像素
                distance: -(Distance + 1) // 将标签放置在连接线上
                // z: -1, // 设置标签的z轴高度，使其比连接线更高
                distance: -10 // 将标签放置在连接线上
              }
            });
          }
@@ -383,8 +381,6 @@
        return {
          name: node.name,
          id: node.id,
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
@@ -392,20 +388,7 @@
          }
        };
      });
      // 设置颜色
      function getColorByIndex() {
        // 生成随机的 R、G、B 分量值，限制在更高的范围内
        var r = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        var g = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        var b = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        // 将 R、G、B 分量值转换为十六进制，并确保每个分量值都是两位数
        var hexR = r.toString(16).padStart(2, "0"); // 使用 padStart 方法确保生成的十六进制数为两位
        var hexG = g.toString(16).padStart(2, "0");
        var hexB = b.toString(16).padStart(2, "0");
        // 拼接十六进制颜色值
        var color = "#" + hexR + hexG + hexB;
        return color;
      }
      
      var option;
      option = {
        title: {
@@ -434,7 +417,7 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            roam: true,
            symbolSize: SymbolSize, // 调整节点大小
            label: {
@@ -442,7 +425,7 @@
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: nodeData,
            links: links,
@@ -456,6 +439,12 @@
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 800,
              edgeLength: 400
            }
          }
        ]
@@ -463,9 +452,10 @@
      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      // 设置点击事件监听
      myChart.off("click");
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        if (params.componentType === "series") {
        console.log(params);
        if (params.dataType === "node") {
          this.spaceTimeArr(params.data.id);
        }
      });

 src/pages/inherit/index.vue

@@ -1,7 +1,7 @@
<template>
  <view class="">
    <headNav
      :idIndex="idIndex"
      idIndex="2"
      :searchBg="false"
      text="中医世医传承数据库"
      bg="/static/image/topBg1.png"
@@ -54,12 +54,7 @@
</template>
<script>
import * as echarts from "echarts";
import {
  inheritMedicalList,
  inheritMedicalSataStatistics,
  inheritMedicalCultureList,
  inheritMedicalRelationList
} from "@/api/index.js";
import { inheritMedicalList } from "@/api/index.js";
export default {
  data() {
    return {
@@ -168,7 +163,6 @@
        Distance = 22;
      }

      console.log(this.nodeData, "this.nodeData");
      let option = {
        title: {
          text: [""]
@@ -232,7 +226,11 @@
      myChart.setOption(option);
      myChart.on("click", (params) => {
        uni.navigateTo({
          url: "/pages/inherit/list"
          url:
            "/pages/inherit/list?id=" +
            params.data.identifier +
            "&name=" +
            encodeURIComponent(params.data.name)
        });
      });
    },

 src/pages/inherit/list.vue

@@ -1,7 +1,7 @@
<template>
  <view class="">
    <headNav
      :idIndex="idIndex"
      idIndex="2"
      :searchBg="false"
      text="中医世医传承数据库"
      bg="/static/image/topBg1.png"
@@ -17,7 +17,7 @@
          >返回</el-button
        >
        <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
          邵登瀛
          {{ mainName }}
        </h3>
      </view>
      <ul class="flex tabBox">
@@ -86,515 +86,79 @@
</template>
<script>
import * as echarts from "echarts";
import {
  inheritMedicalSataStatistics,
  inheritMedicalCultureList,
  inheritMedicalRelationList
} from "@/api/index.js";

export default {
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      mainName: "",
      activeIndex: 1,
      dataList: [
        {
          name: "薛雪",
          x: 300,
          y: 300,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "邵登瀛",
          x: 400,
          y: 300,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "邵鲁瞻",
          x: 500,
          y: 300,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "邵春泉",
          x: 600,
          y: 300,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "徐锦",
          x: 650,
          y: 400,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "邵丙扬",
          x: 700,
          y: 300,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "冯桂芬",
          x: 720,
          y: 400,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "李鸿章",
          x: 740,
          y: 500,
          itemStyle: {
            color: "#E1E1E1",
            borderColor: "#888888",
            borderWidth: "3"
          }
        },
        {
          name: "邵景尧",
          x: 800,
          y: 200,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "邵景康",
          x: 800,
          y: 400,
          itemStyle: {
            color: "#F8E2D7",
            borderColor: "#F3AA78",
            borderWidth: "3"
          }
        },
        {
          name: "鲍昇",
          x: 750,
          y: 100,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "文龙",
          x: 850,
          y: 100,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "傅庆贻",
          x: 950,
          y: 50,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "成允",
          x: 950,
          y: 100,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "胡玉坦",
          x: 950,
          y: 150,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "裕禄",
          x: 950,
          y: 200,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "陆乃昔",
          x: 950,
          y: 250,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "刘传祺",
          x: 950,
          y: 300,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "邵诚",
          x: 950,
          y: 350,
          itemStyle: {
            color: "#DCE7EB",
            borderColor: "#5F81A4",
            borderWidth: "3"
          }
        },
        {
          name: "曾国藩",
          x: 1050,
          y: 200,
          itemStyle: {
            color: "#E1E1E1",
            borderColor: "#888888",
            borderWidth: "3"
          }
        },
        {
          name: "曾国藩01",
          x: 1050,
          y: 50,
          itemStyle: {
            color: "#E1E1E1",
            borderColor: "#888888",
            borderWidth: "3"
          }
        },
        {
          name: "曾国藩02",
          x: 1050,
          y: 350,
          itemStyle: {
            color: "#E1E1E1",
            borderColor: "#888888",
            borderWidth: "3"
          }
        }
      ],
      links: [
        {
          source: "薛雪",
          target: "邵登瀛",
          relationName: "师徒",
          hasArrow: "true"
        },
        {
          source: "邵登瀛",
          target: "邵鲁瞻",
          relationName: "父子"
        },
        {
          source: "邵鲁瞻",
          target: "邵春泉",
          relationName: "父子"
        },
        {
          source: "邵春泉",
          target: "邵丙扬",
          relationName: "叔侄"
        },
        //曲线
        {
          source: "邵春泉",
          target: "徐锦",
          relationName: "朋友",
          //这里设置为不带箭头
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵丙扬",
          target: "邵景尧",
          relationName: "父子"
        },
        {
          source: "邵丙扬",
          target: "邵景康",
          relationName: "父子"
        },
        //曲线
        {
          source: "邵丙扬",
          target: "冯桂芬",
          relationName: "朋友",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        //曲线
        {
          source: "邵丙扬",
          target: "鲍昇",
          relationName: "师徒",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: 0.2
          }
        },
        //曲线
        {
          source: "冯桂芬",
          target: "李鸿章",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "邵景康",
          relationName: "兄弟"
        },
        {
          source: "邵景康",
          target: "邵景尧",
          relationName: "兄弟"
        },
        {
          source: "邵景尧",
          target: "鲍昇",
          relationName: "姻亲",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "文龙",
          relationName: "朋友",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: 0.2
          }
        },
        {
          source: "邵景尧",
          target: "傅庆贻",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.1
          }
        },
        {
          source: "邵景尧",
          target: "成允",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "胡玉坦",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "裕禄",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "陆乃昔",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "刘传祺",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "邵景尧",
          target: "邵诚",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1",
            curveness: -0.2
          }
        },
        {
          source: "成允",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "胡玉坦",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "裕禄",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "陆乃昔",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "刘传祺",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "成允",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "成允",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "成允",
          target: "曾国藩",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "傅庆贻",
          target: "曾国藩01",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        },
        {
          source: "邵诚",
          target: "曾国藩02",
          relationName: "同僚",
          symbol: ["none", "none"],
          lineStyle: {
            color: "#6584B1"
          }
        }
      ],
      dataList: [],
      links: [],
      socialMapping: true,
      showType: "1"
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    this.mainName = decodeURIComponent(options.name);
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    // 初始化 echarts
    this.initBarChart(this.dataList, this.links);
    this.getData();
  },
  methods: {
    getData() {
      inheritMedicalRelationList({
        identifier: this.idIndex,
        socialFlag: true
      }).then((res) => {
        console.log(res);
        let data = 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
            );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#DCE7EB";
            data.nodeList[index].borderColor = "#5F81A4";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#E1E1E1";
            data.nodeList[index].borderColor = "#888888";
          }
          this.links.push({
            source: this.mainName,
            target: data.nodeList[index].name,
            relationName: linkItem.relation
          });
        }
        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"
            }
          };
        });
        console.log(this.dataList,this.links);
        this.initBarChart();
      });
    },
    showSocialMapping() {
      this.socialMapping = !this.socialMapping;
      let newDataList = [];
@@ -619,7 +183,7 @@
        }, 50);
      }
    },
    initBarChart(dataList, links) {
    initBarChart() {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -648,9 +212,6 @@
      }

      let option = {
        title: {
          text: [""]
        },
        backgroundColor: {
          type: "image",
          image: "./static/image/WMBg.png",
@@ -663,16 +224,16 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: false,
            roam: true,
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],

            edgeLabel: {
@@ -689,13 +250,19 @@
              }
            },
            //各个节点
            data: dataList, //关系连接
            links: links,
            data: this.dataList, //关系连接
            links: this.links,
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400
            }
          }
        ]