关系图
image.png
第一种： 可使用vis类库
1、Vis-network
visjs 提供了一个网络视图模块，提供给我们绘制网络之间的各个点、线之间的关系，这个的话就比较类似于echarts的地图，在地图上打点画线的逻辑，区别在于使用visjs可以拖动节点的位置、以及visjs里面还有对物理引擎等的引入。
网络是一种可视化，用于显示由节点和边组成的网络和网络。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行，最多可容纳数千个节点和边。为了处理大量节点，Network 支持集群。
官网地址：https://visjs.org/index.html
官网文档地址 ：https://visjs.github.io/vis-network/docs/network/
中文文档可参考： https://ame.cool/pages/222681/
- 具体示例可参考
https://www.likecs.com/show-203852598.html
https://blog.csdn.net/maidu_xbd/article/details/106789416
Image.png
可针对根节点和叶子节点设置具体的样式；
Image.png
- 碰到过的问题
Image.png
节点模糊
问题原因是： 浏览器的缩放比例不是100%，而是25%；调整缩放比例到100%以后就清晰了。
————————————————
参考完档：
https://blog.csdn.net/qq_44973159/article/details/124290104
第二种： 可使用echarts类库中的关系图
官网 ： https://echarts.apache.org/examples/zh/index.html#chart-type-graph
官网文档配置说明 ： https://echarts.apache.org/zh/option.html#series-graph.type
效果图：
series下的graph；
image.png
实现的简单效果
image.png
配置项如下：
option = {
title: {
text: 'Basic Graph'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbol:'rect',
symbolSize: [150,30],
roam: true,
label: {
show: true
},
itemStyle:{
color :'rgba(0,255,255,1)',
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [
{
name: 'Node 1',
x: 300,
y: 300
},
{
name: 'Node 2',
x: 800,
y: 300
},
{
name: 'Node 3',
x: 550,
y: 100
},
{
name: 'Node 4',
x: 550,
y: 500
}
],
// links: [],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
},
{
source: 'Node 2',
target: 'Node 1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},
{
source: 'Node 1',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 4'
},
{
source: 'Node 1',
target: 'Node 4'
}
],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
网友评论