1

YM

2024-06-17 a10960e9cee3776ffd3871e5949f6b474127c428

 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"
@@ -9,7 +11,6 @@
      >
      <view class="flex flex-center flex-column">
        <view
          class=""
          style="
            font-weight: 900;
            margin-bottom: 0.2rem;
@@ -30,14 +31,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="
@@ -52,7 +50,6 @@
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
@@ -61,25 +58,46 @@
                border-radius: 50%;
              "
            ></view>
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
            <view style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
        </li>
      </ul>
    </view>
    <view class="Bottom">
      <view id="main" style="width: 100vw; height: 5rem"></view>
    <view class="contentBox" style="position: relative">
      <div
        v-if="nodeData.length == 0"
        style="
          color: #666;
          text-align: center;
          font-size: 16px;
          position: absolute;
          top: 1rem;
          left: 0;
          right: 0;
        "
      >
        暂无数据
      </div>
      <view id="main" style="width: 100%; height: 100%"> </view>
    </view>
  </view>
</template>

<script>
import { getIntroduction } from "@/api/index.js";
import {
  getIntroduction,
  searchSchoolPerson,
  schoolAtlas
} from "@/api/index.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      detailData: {},
      nodeData: [],
      links: [],
      // 标题顶部栏需要的东西
      idIndex: 0,
      dynasty: [
@@ -103,17 +121,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)
@@ -138,11 +152,15 @@
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList &&
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                      ? "出处：《" +
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
            : [],
@@ -151,11 +169,15 @@
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList &&
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                      ? "出处：《" +
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
            : [],
@@ -164,11 +186,15 @@
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList &&
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                      ? "出处：《" +
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
            : [],
@@ -177,17 +203,97 @@
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList &&
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                      ? "出处：《" +
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
            : []
        };
        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
        });
        schoolAtlas(Number(this.idIndex)).then((res) => {
          if (res.list) {
            for (let i = 0; i < res.list.length; i++) {
              const citem = res.list[i];
              if (
                citem.relationType != "代表人物" &&
                citem.relationType != "人物关系"
              ) {
                // 节点
                if (citem.name1) {
                  this.nodeData.push({
                    name: citem.name1,
                    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.name1,
                    label: {
                      show: true,
                      formatter: function (params) {
                        // 使用函数动态生成标签内容
                        // return relationships.find(rel => rel.source === nodes[params.data
                        //       .source] && rel.target === nodes[params.data.target])
                        //    .relation;
                        return citem.name2;
                      }, // 设置关系标签内容为"Child-Parent"
                      color: "#2C2C2C",
                      fontSize: 14,
                      backgroundColor: "rgba(255, 255, 255, 1)",
                      padding: [3, 8],
                      borderRadius: 30,
                      position: "middle", // 设置标签文本在线的中间位置上居中显示
                      // z: -1, // 设置标签的z轴高度，使其比连接线更高
                      distance: -10 // 将标签放置在连接线上
                    }
                  });
                }
              }
            }
          }
          this.init();
        });
      }
    },
    goBack() {
      this.$router.go(-1);
@@ -197,300 +303,80 @@
        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: "force",
            roam: true,
            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,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0.3
                width: 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: {
              opacity: 0.9,
              width: 2
            },
            force: {
              // layoutAnimation: false,
              // friction: 1,
              repulsion: 800,
              edgeLength: 400
            }
          ]
        };
          }
        ]
      };

        // 将生成的连接线添加到echarts图表的option中
        option.series[0].links = links;
        option && myChart.setOption(option);
      });
      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.innt();
  }
};
</script>
@@ -535,6 +421,9 @@
    height: 0.24rem;
    font-size: 0.12rem;
    padding: 0;
    border-radius: 0;
    border: 1px solid #9e9e9e;
    color: #000;
  }

  .Lists {
@@ -552,4 +441,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>