1

YM

2024-07-17 d5f572496c5fb12fec2fe346b847bf58331299c9

 src/pages/academicGenres/chart.vue

@@ -3,7 +3,7 @@
    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"
@@ -11,7 +11,6 @@
      >
      <view class="flex flex-center flex-column">
        <view
          class=""
          style="
            font-weight: 900;
            margin-bottom: 0.2rem;
@@ -51,7 +50,6 @@
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
@@ -60,21 +58,39 @@
                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="contentBox">
      <view id="main" style="width: 100%; height: 100%"></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, searchSchoolPerson } from "@/api/index.js";
import {
  getIntroduction,
  searchSchoolPerson,
  schoolAtlas
} from "@/api/index.js";
import * as echarts from "echarts";
export default {
  data() {
@@ -136,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 : "")
                      : ""
                };
              })
            : [],
@@ -149,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 : "")
                      : ""
                };
              })
            : [],
@@ -162,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 : "")
                      : ""
                };
              })
            : [],
@@ -175,11 +203,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 : "")
                      : ""
                };
              })
            : []
@@ -206,34 +238,58 @@
          },
          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
        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();
        });
@@ -271,7 +327,8 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            roam: true,
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
@@ -282,7 +339,12 @@
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
@@ -300,10 +362,14 @@
            data: this.nodeData, //关系连接
            links: this.links,
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              width: 2
            },
            force: {
              // layoutAnimation: false,
              // friction: 1,
              repulsion: 800,
              edgeLength: 400
            }
          }
        ]
@@ -355,6 +421,9 @@
    height: 0.24rem;
    font-size: 0.12rem;
    padding: 0;
    border-radius: 0;
    border: 1px solid #9e9e9e;
    color: #000;
  }

  .Lists {