三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/AcademicHistory/AcademicHistory.vue

@@ -1,50 +1,39 @@
<template>
   <view>
      <view class="NavTop flex">
         <view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="">历代学术流派</view>
         <view class="NavTopr">
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
         </view>
      </view>
   <!-- 顶部导航 -->
   <headNav :idIndex="idIndex"  text="历代学术流派"/>
      <view class="Midde flex">
         <view class="MiddeBack">返回</view>
         <!-- <view class="MiddeBack">返回</view> -->
         <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
         <view class="flex flex-center flex-column">
            <view class="" style="font-weight: 900;margin-bottom:20rpx ;">河间图谱</view>
            <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">河间图谱
            </view>
            <ul class="flex Lists">
               <li class="flex">
                  <view class=""
                     style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                  </view>
                  <view class="">幅度萨芬</view>
               <li @click="ListClick" style="background-color: #fff;color: #597AA5;">
                  撒地方
               </li>
               <li class="flex">
                  <view class=""
                     style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                  </view>
                  <view class="">幅度萨芬</view>
               <!-- /pages/AcademicHistory/AcademicHistory -->
               <li style="background-color: #597AA5;color: #fff;">
                  撒地方
               </li>
               <li class="flex">
                  <view class=""
                     style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                  </view>
                  <view class="">幅度萨芬</view>
               </li>
               <li class="flex">
                  <view class=""
                     style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                  </view>
                  <view class="">幅度萨芬</view>
               </li>

            </ul>
         </view>
         <view class=""></view>
      </view>
      <view class="flex flex-center" style="width: 100%; margin: .2rem 0;">
         <ul class="flex">
            <li style="" class="school1" v-for="(item,index) in dynasty" :key="item.id">
               <view class="flex flex-center font-family school"
                  style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                  <view class="" :style="{background:item.color}"
                     style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                  <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
               </view>
            </li>
         </ul>
      </view>
      <view class="Bottom">
         <view id="main" style="width: 100vw; height: 500px;"></view>
         <view id="main" style="width: 100vw; height: 5rem;"></view>
      </view>
   </view>
</template>
@@ -54,127 +43,324 @@
   export default {
      data() {
         return {

            // 标题顶部栏需要的东西
            idIndex:0,
            dynasty: [{
               name: '代表人物',
               color: '#597AA5',
               id: 1
            }, {
               name: '重要医家',
               color: '#DA7A2B',
               id: 2
            }, {
               name: '关系文献',
               color: '#9E9E9E',
               id: 3
            }]
         }
      },
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions',options.id);
      },
      methods: {
         goBack() {
            // uuni.redirectTo();
            uni.redirectTo({
               url: '/pages/index/index'
            })
         },
         ListClick() {
            uni.navigateTo({
               url: '/pages/interchannel/interchannel?id='+this.idIndex
            })
         },
         innt() {
            this.$nextTick(() => {
               var chartDom = document.getElementById('main'); // 获取HTML中的元素，此处假设有一个id为'main'的元素作为图表容器
               var myChart = echarts.init(chartDom); // 初始化echarts实例，并将其与图表容器绑定
               var option; // 定义变量option来存储图表的配置项
               // 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 = [{
                     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 = {
                        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,
                     },
                     symbolSize: SymbolSize + 50
                  };
               });
               // 设置颜色
               function getColorByIndex(index) {
                  var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
                  return colors[index % colors.length];
               }
               var option;
               option = {
                  // title: {
                  //   text: 'Basic Graph' // 图表标题为'Basic Graph'
                  // },
                  tooltip: {}, // 鼠标悬停时显示的提示框
                  animationDurationUpdate: 1500, // 数据更新时的动画时长
                  animationEasingUpdate: 'quinticInOut', // 数据更新时的动画效果
                  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', // 图表类型为'graph'
                     layout: 'none', // 图表布局方式为'none'，即节点位置由x和y坐标指定
                     symbolSize: 50, // 节点的大小
                     roam: false, // 是否开启漫游，即可以拖动和缩放图表
                     type: 'graph',
                     layout: 'none',
                     symbolSize: SymbolSize, // 调整节点大小
                     label: {
                        show: true // 是否显示节点上的标签
                        show: true,
                        color: 'black', // 设置节点文字颜色为黑色
                        fontSize: FontSize, // 设置文字大小
                     },
                     // edgeSymbol: ['circle'],
                     // edgeSymbolSize: [4, 10],
                     edgeSymbol: ['circle', 'arrow'], // 边的起始和结束箭头样式
                     edgeSymbolSize: [4, 10], // 边的起始和结束箭头大小
                     edgeLabel: {
                        fontSize: 20 // 边的标签字体大小
                     },
                     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 // 边的曲度
                           }
                        }
                     ],
                     edgeSymbolSize: [20, 20], // 边的起始和结束箭头大小
                     data: nodeData,
                     links: links,
                     lineStyle: {
                        opacity: 0.9, // 边的透明度
                        width: 2, // 边的宽度
                        curveness: 0 // 边的曲度
                        opacity: 0.9,
                        width: 2,
                        curveness: 0.3
                     }
                  }]
               };

               option && myChart.setOption(option); // 将配置项应用于图表实例
               console.log(myChart);
               // 将生成的连接线添加到echarts图表的option中
               option.series[0].links = links;
               option && myChart.setOption(option);
            })
         }
      },
@@ -206,26 +392,42 @@
      }
   }


   .Midde {
      background-color: #d1d6dc;
      /* background-color: #d1d6dc; */
      background-image: url(@/static/image/学派Bg.png);
      background-size: 100% 100%;
      color: #000;
      padding: 40rpx;
      padding: .18rem .23rem 0;
      align-items: flex-start;
      height: 1.43rem;

      view {

         color: #000;
      }

      .MiddeBack {
         width: 0.6rem;
         height: 0.24rem;
         font-size: .12rem;
         padding: 0;

      }

      .Lists {
         li {
            /* min-width: 50rpx; */
            border-radius: 40rpx;
            background-color: #fff;
            padding: 0 10rpx;
            font-size: 18rpx;
            margin: 0 20rpx;
            width: 0.96rem;
            height: .3rem;
            border: 1px solid #597AA5;
            line-height: .3rem;
            text-align: center;
            font-size: .14rem;
         }
      }
   }

   .school1 {
      margin: 0 .2rem;
   }
</style>