图谱和传承

YM

2024-04-30 f4c14c24cb6cf1ed1c09cab760f6b9c8381df557

 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,264 +247,24 @@
        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);

    init() {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        // 假设您有节点名称和它们之间的关系数据
        var nodes = ["刘完素", "张仲景", "金元四大家", "三消论", "伤寒直格"];
        var relationships = [
          {
            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 = {
              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
            },
            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",
@@ -462,35 +272,45 @@
            {
              type: "graph",
              layout: "none",
              symbolSize: SymbolSize, // 调整节点大小
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
              label: {
                show: true,
                color: "black", // 设置节点文字颜色为黑色
                fontSize: FontSize // 设置文字大小
              },
              // edgeSymbol: ['circle'],
              // edgeSymbolSize: [4, 10],
              edgeSymbol: ["circle", "arrow"], // 边的起始和结束箭头样式
              edgeSymbolSize: [20, 20], // 边的起始和结束箭头大小
              data: nodeData,
              links: links,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

            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.3
              curveness: 0
              }
            }
          ]
        };

        // 将生成的连接线添加到echarts图表的option中
        option.series[0].links = links;
        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>