三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/characterRelation/characterRelation.vue

@@ -3,14 +3,13 @@
      <headNav />
      <!-- 高级搜索 -->
      <view style="margin: .35rem 0 .16rem 0; ">
         <advancedSearch />
         <advancedSearch placehold="输入姓名/别名/朝代/传主职业搜索"/>
      </view>
      <!-- 热门搜索 -->
      <view class="flex flex-center" style="font-size: .1rem;color: #2C2C2C;">
      <view class="flex flex-center hotSearch">
         热门搜索：
         <ul class="flex" style="margin-right: 10rpx;">
            <li v-for="item in hot" :key="item.id"
               style="color: #244A7B; margin: 0 .1rem;color: #5879a4;font-size: .12rem;">
            <li v-for="item in hot" :key="item.id" style="">
               {{item.name}}
            </li>
         </ul>
@@ -148,6 +147,27 @@
               // 其他关系...
            ];

            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) {
@@ -166,15 +186,15 @@
                              .relation;
                        }, // 设置关系标签内容为"Child-Parent"
                        color: '#2C2C2C',
                        fontSize: 12,
                        fontSize: FontSize - 2,
                        backgroundColor: 'rgba(255, 255, 255, 1)',
                        padding: [3, 8],
                        borderRadius: 30,
                        position: 'middle', // 设置标签文本在线的中间位置上居中显示
                        bottom: -10,
                        // bottom: -(FontSize+10),
                        z: 10, // 设置标签的z轴高度，使其比连接线更高
                        // offset: [0, 15] ,// 往下移动 10 像素
                        distance: -12, // 将标签放置在连接线上
                        distance: -(Distance + 1), // 将标签放置在连接线上
                     }
                  });
               }
@@ -189,7 +209,7 @@
                  y: Math.random() * 600, // 设置随机y坐标位置
                  itemStyle: {
                     color: getColorByIndex(index), // 可以根据索引设置不同的颜色
                     borderWidth: 2,
                     borderWidth: BorderWidth,
                     borderColor: getColorByIndex(index + 1)
                  }
               };
@@ -201,6 +221,19 @@
            }
            var option;
            option = {
               title: {
                  // text: '书中最常提到的100位人物',
                  subtext: '书中最常提到的100位人物',
                  left: 'center',
                  top: FontSize + 10,
                  // textStyle: {
                  //    fontSize: FontSize // 设置标题文字大小为 18px
                  // },
                  subtextStyle: {
                     fontSize: FontSize ,// 设置副标题文字大小为 14px
                     color:'#2C2C2C'
                  }
               },
               backgroundColor: {
                  type: 'image',
                  image: '/static/image/characterRelationBg.png',
@@ -214,11 +247,11 @@
               series: [{
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 40, // 调整节点大小
                  symbolSize: SymbolSize, // 调整节点大小
                  label: {
                     show: true,
                     color: 'black', // 设置节点文字颜色为黑色

                     fontSize: FontSize, // 设置文字大小
                  },
                  edgeSymbol: ['circle'],
                  edgeSymbolSize: [4, 10],
@@ -240,10 +273,40 @@
      mounted() {
         // 关系图谱
         this.relation()

         // 监听窗口大小变化
         window.addEventListener('resize', this.relation);
      }
   }
</script>

<style>
   @media screen and (min-width:2560px)and (max-width:3840px) {}

   @media screen and (min-width:1366px) and (max-width:1920px) {}

   ::v-deep .uni-input-placeholder {
      line-height: 1;
      font-size: .12rem;
   }

   ::v-deep .ffff {
      border-radius: .5rem;
   }

   ::v-deep .widget_button {
      border-radius: .5rem;
      margin: .02rem;
   }

   .hotSearch {
      font-size: .12rem;
      color: #2C2C2C;

      li {
         color: #244A7B;
         margin: 0 .1rem;
         color: #244A7B;
      }
   }
</style>