<template>
|
<view>
|
<!-- 顶部导航 -->
|
<headNav :idIndex="idIndex" 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:.2rem ;font-size: .26rem;line-height: 1;">河间图谱
|
</view>
|
<ul class="flex Lists">
|
<li @click="ListClick" style="background-color: #fff;color: #597AA5;">
|
撒地方
|
</li>
|
<!-- /pages/AcademicHistory/AcademicHistory -->
|
<li style="background-color: #597AA5;color: #fff;">
|
撒地方
|
</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: 5rem;"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
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
|
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来存储图表的配置项
|
|
// 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: .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 {
|
width: 0.96rem;
|
height: .3rem;
|
border: 1px solid #597AA5;
|
line-height: .3rem;
|
text-align: center;
|
font-size: .14rem;
|
}
|
}
|
}
|
|
.school1 {
|
margin: 0 .2rem;
|
}
|
</style>
|
