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"
@@ -65,23 +65,32 @@
        </li>
      </ul>
    </view>
    <view class="contentBox" style="position: relative;">
    <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>

        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() {
@@ -149,8 +158,8 @@
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 P" +
                        item.pageNo
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
@@ -166,8 +175,8 @@
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 P" +
                        item.pageNo
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
@@ -183,8 +192,8 @@
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 P" +
                        item.pageNo
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
@@ -200,8 +209,8 @@
                        res.object.bookList.find(
                          (citem) => citem.id == item.bookId
                        ).name +
                        "》 P" +
                        item.pageNo
                        "》 " +
                        (item.pageNo ? "P " + item.pageNo : "")
                      : ""
                };
              })
@@ -229,34 +238,57 @@
          },
          symbolSize: 100
        });
        searchSchoolPerson({
          keyword: item
        }).then((res) => {
        schoolAtlas(Number(this.idIndex)).then((res) => {
          if (res.list) {
            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
              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();
@@ -295,7 +327,8 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            roam: true,
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
@@ -306,7 +339,12 @@
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
@@ -324,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
            }
          }
        ]