222

YM

2024-05-17 0b4fa4b2cfd68528d15aa71557425a7a80e3fc41

 src/pages/character/index.vue

@@ -9,6 +9,7 @@
        :from="From"
        placehold="请输入关键字"
        :keyword="searchKey"
        :advancedSearchBack="advancedSearchBack"
      />
    </view>
    <!-- 热门搜索 -->
@@ -27,10 +28,10 @@
    </view>
    <view class="" style="margin-left: 0.2rem">书中最常提到的100位人物</view>
    <!-- 关系表地图 -->
    <view
      id="relation"
      style="margin-top: 0.2rem; height: 70vh; width: 100%"
    ></view>
    <view id="relation" style="margin-top: 0.2rem; height: 70vh; width: 100%;position: relative;"
      ><div v-if="!loading && relationships.length == 0" style="position: absolute;top: 30%;left: 0;right: 0;text-align: center;font-size: 0.20rem;color: #666;">暂无相关数据</div></view
    >

    <!-- 朝代 -->
    <view
      class="flex flex-center"
@@ -86,6 +87,7 @@
export default {
  data() {
    return {
      loading: true,
      // echarts数据
      nodes: [],
      // echarts两者的关系
@@ -308,6 +310,7 @@
            this.relationships.push(obj);
          });
        }
        this.loading = false;
        this.relation();
      });
    },
@@ -369,10 +372,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 +384,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 +391,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 +420,7 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            roam: true,
            symbolSize: SymbolSize, // 调整节点大小
            label: {
@@ -442,7 +428,7 @@
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: nodeData,
            links: links,
@@ -456,6 +442,12 @@
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 800,
              edgeLength: 400
            }
          }
        ]
@@ -463,9 +455,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);
        }
      });
@@ -478,8 +471,17 @@
    },
    // 高级搜索
    onSubmit(val) {
      getAdvanceSearch(val).then((res) => {
        console.log(res, "接口调用成功");
      getAdvanceSearch({
        ...val,
        page: 1,
        pageSize: 100
      }).then((res) => {
        console.log(res, "res");
      });
    },
    advancedSearchBack() {
      uni.navigateTo({
        url: "/pages/knowledgeBase/knowledgeBase"
      });
    },
    // 点击下面的朝代按钮