<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>
|
<view class="Midde flex">
|
<view class="MiddeBack">返回</view>
|
<view class="flex flex-center flex-column">
|
<view class="" style="font-weight: 900;margin-bottom:20rpx ;">河间图谱</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>
|
<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>
|
<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="Bottom">
|
<view id="main" style="width: 100vw; height: 500px;"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
export default {
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
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: 50, // 节点的大小
|
roam: false, // 是否开启漫游，即可以拖动和缩放图表
|
label: {
|
show: true // 是否显示节点上的标签
|
},
|
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 // 边的曲度
|
}
|
}
|
],
|
lineStyle: {
|
opacity: 0.9, // 边的透明度
|
width: 2, // 边的宽度
|
curveness: 0 // 边的曲度
|
}
|
}]
|
};
|
|
option && myChart.setOption(option); // 将配置项应用于图表实例
|
console.log(myChart);
|
})
|
}
|
},
|
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;
|
color: #000;
|
padding: 40rpx;
|
align-items: flex-start;
|
|
view {
|
|
color: #000;
|
}
|
|
.Lists {
|
li {
|
/* min-width: 50rpx; */
|
border-radius: 40rpx;
|
background-color: #fff;
|
padding: 0 10rpx;
|
font-size: 18rpx;
|
margin: 0 20rpx;
|
}
|
}
|
}
|
</style>
|
