<template>
|
<view>
|
<!-- 顶部导航 -->
|
<headNav :idIndex="3" text="历代学术流派" />
|
<view class="Midde flex">
|
<!-- <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: 0.2rem;
|
font-size: 0.26rem;
|
line-height: 1;
|
"
|
>{{ detailData.name }}
|
</view>
|
<ul class="flex Lists">
|
<li
|
@click="ListClick"
|
style="background-color: #fff; color: #597aa5; cursor: pointer"
|
>
|
学派介绍
|
</li>
|
<li style="background-color: #597aa5; color: #fff; cursor: pointer">
|
学派图谱
|
</li>
|
</ul>
|
</view>
|
</view>
|
<view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
|
<ul class="flex">
|
<li
|
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: 0.3rem;
|
padding: 0.06rem 0.15rem;
|
color: #2c2c2c;
|
font-size: 0.12rem;
|
margin-top: 0.03rem;
|
margin-right: 0.1rem;
|
background-color: #fff;
|
"
|
>
|
<view
|
class=""
|
:style="{ background: item.color }"
|
style="
|
margin-right: 0.07rem;
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
"
|
></view>
|
<view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
|
item.name
|
}}</view>
|
</view>
|
</li>
|
</ul>
|
</view>
|
<view class="Bottom">
|
<view id="main" style="width: 100vw; height: 5rem"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { getIntroduction } from "@/api/index.js";
|
import * as echarts from "echarts";
|
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;
|
this.getData();
|
},
|
methods: {
|
getData() {
|
getIntroduction(Number(this.idIndex)).then((res) => {
|
this.detailData = {
|
name: res.object.school_NAME[0].content,
|
icon:
|
res.object.pictureList && res.object.pictureList.length > 0
|
? getImg(res.object.pictureList[0].filePath)
|
: "",
|
character: res.object.important_PEOPLE
|
? res.object.important_PEOPLE
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
skilledDoctor: res.object.important_PHYSICIAN
|
? res.object.important_PHYSICIAN
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
works: res.object.important_WORK
|
? res.object.important_WORK.map((item) => item.content).join("、")
|
: "",
|
thought: res.object.school_THOUGHT
|
? res.object.school_THOUGHT.map((item) => item.content).join("、")
|
: "",
|
source: res.object.bookList
|
? res.object.bookList.map((item) => item.name).join("、")
|
: "",
|
brief: res.object.school_INTRODUCTION
|
? res.object.school_INTRODUCTION.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
develop: res.object.school_DEVELOPMENT
|
? res.object.school_DEVELOPMENT.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
achievement: res.object.achievement_INFLUENCE
|
? res.object.achievement_INFLUENCE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
literature: res.object.related_LITERATURE
|
? res.object.related_LITERATURE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: []
|
};
|
console.log(this.detailData);
|
});
|
},
|
goBack() {
|
this.$router.go(-1);
|
},
|
ListClick() {
|
uni.navigateTo({
|
url: "/pages/academicGenres/detail?id=" + this.idIndex
|
});
|
},
|
innt() {
|
this.$nextTick(() => {
|
// 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 = {
|
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",
|
layout: "none",
|
symbolSize: SymbolSize, // 调整节点大小
|
label: {
|
show: true,
|
color: "black", // 设置节点文字颜色为黑色
|
fontSize: FontSize // 设置文字大小
|
},
|
// edgeSymbol: ['circle'],
|
// edgeSymbolSize: [4, 10],
|
edgeSymbol: ["circle", "arrow"], // 边的起始和结束箭头样式
|
edgeSymbolSize: [20, 20], // 边的起始和结束箭头大小
|
data: nodeData,
|
links: links,
|
lineStyle: {
|
opacity: 0.9,
|
width: 2,
|
curveness: 0.3
|
}
|
}
|
]
|
};
|
|
// 将生成的连接线添加到echarts图表的option中
|
option.series[0].links = links;
|
option && myChart.setOption(option);
|
});
|
}
|
},
|
mounted() {
|
this.innt();
|
}
|
};
|
</script>
|
|
<style scoped>
|
view {
|
color: #fff;
|
}
|
|
.NavTop {
|
background-color: #0c274c;
|
padding: 25rpx;
|
|
img {
|
width: 30rpx;
|
height: 30rpx;
|
vertical-align: middle;
|
}
|
|
.NavTopr {
|
img {
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.Midde {
|
/* background-color: #d1d6dc; */
|
background-image: url(@/static/image/学派Bg.png);
|
background-size: 100% 100%;
|
color: #000;
|
padding: 0.18rem 0.23rem 0;
|
align-items: flex-start;
|
height: 1.43rem;
|
|
view {
|
color: #000;
|
}
|
|
.MiddeBack {
|
width: 0.6rem;
|
height: 0.24rem;
|
font-size: 0.12rem;
|
padding: 0;
|
}
|
|
.Lists {
|
li {
|
width: 0.96rem;
|
height: 0.3rem;
|
border: 1px solid #597aa5;
|
line-height: 0.3rem;
|
text-align: center;
|
font-size: 0.14rem;
|
}
|
}
|
}
|
|
.school1 {
|
margin: 0 0.2rem;
|
}
|
</style>
|
