关系图

何为关系图，从字面上可以看出，为关系的图形，既然为关系，那么就需要有点以及关系，用来表示点与点之间的联系。所以我们可以得出：关系图需要两个必要的元素，节点，关系，其中关系需要包含有联系的节点以及节点联系说明。因此我们首先需要将数据设计出来。

数据

节点数据

nodes:[{

name:'节点名',

id:'节点id'

}]

关系数据

links:[{

relation:{

name:'关系名称',

id:'关系id'

},

source:'关系的起点节点id',

target:'关系的目标节点id'

}]

至此我们的数据也弄明白了，那么我们现在来看下echarts关系图的制作。

首先看下我们要做的关系图的样子

graph.png

引入Echarts

当前采用的是vue+ts模式的开发模式，故以下都将以此来说明。

yarn add echarts

由于使用的是ts.故需要引入类型说明

yarn add @types/echarts

创建dom节点

新建一个vue文件，新建dom节点，注意：如果dom节点没有设置长宽，后面渲染会不出现，因为没有给出空间

基于Echarts搭建图形基础架子

由于echarts的架子都是差不多的，重点在于series，所以本篇文章主要在series上进行说明，故先复制一份常用架子，如下

myEcharts:any = null;

public initEcharts(){

const mainDom: any = this.$el.querySelector("#echartsMain");//设置dom

this.myEcharts = echarts.init(mainDom);//初始化echarts

let option:any = {

series:[]

};

this.myEcharts.setOption(option);

}

至此，我们一个基于echarts的图形基础架子搭建好了，刷新页面，没有报错，dom节点也存在。那么下面就到了创建关系力布图的时候了

创建节点

按照上图，以及我们前面关于数据的说明，我们可以先创建节点数据

let nodes: Array = [

{

name: "韦小宝",

id: "1",

},

{

name: "方怡",

id: "2",

},

{

name: "双儿",

id: "3",

},

{

name: "茅十八",

id: "4",

},

{

name: "吴六奇",

id: "5",

},

];

将节点数据设置到力布图上,在上面的options中增加节点

llet options:any = {

series:[{

nodes:nodes

}]

}

此时数据加上了，但是没有显示，是因为我们没有设置当前图标类型为力布图，因此在options中增加说明即可

let options:any = {

series:[{

type: 'graph',

layout: 'force',

nodes:nodes

}]

}

那么我们就得到了如下的图

node.png

但是这样的话，有几个问题，第一，节点过小，第二，不知道节点到底是哪个。那么我们下一步就应该给节点增加样式

增加节点样式

1：设置节点的大小，以及形状,直接在nodes数据中进行修改

let nodes: Array = [

{

name: "韦小宝",

id: "1",

symbolSize: 60,//节点大小

symbol:'circle',//节点形状，'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'也可'image://url'设置节点图片

},

{

name: "方怡",

id: "2",

symbolSize: 60,

},

{

name: "双儿",

id: "3",

symbolSize: 60,

},

{

name: "茅十八",

id: "4",

symbolSize: 60,

},

{

name: "吴六奇",

id: "5",

symbolSize: 60,

},

];

修改完后页面为

size.png

在echarts中所有的节点的样式都是通过itemStyle来进行设置的，同样的在力布图中已经可以通过itemstyle属性进行设置节点样式(也可以直接在nodes数据中设置单个节点的样式哦，这个可以自己去试下),同理节点上的文字显示问题也是如此，

let options: any = {

series: [

{

type: 'graph',

layout: 'force',

nodes: nodes,

itemStyle: {

color: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{

offset: 0,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 0.7,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 1,

color: "#95dcb2", // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

},

label: {

show: true,

position: "bottom",

distance: 5,

fontSize: 18,

align: "center",

},

},

],

};

至此节点设置结束，页面如下：

node-label.png

创建关系数据

按照最开始的图片已经数据说明，我们可以很明显的将关系数据编辑出来，如下

let links: Array = [

{

source: "1",

target: "2",

relation: {

name: "老婆",

id: "1",

},

},

{

source: "1",

target: "3",

relation: {

name: "老婆",

id: "1",

},

},

{

source: "1",

target: "4",

relation: {

name: "兄弟",

id: "1",

},

},

{

source: "4",

target: "1",

relation: {

name: "兄弟",

id: "1",

},

},

{

source: "3",

target: "5",

relation: {

name: "义妹",

id: "1",

},

},

];

力布图添加关系

在options中增加关系数据，如下

let options: any = {

series: [

{

type: 'graph',

layout: 'force',

nodes: nodes,

links:links,

itemStyle: {

color: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{

offset: 0,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 0.7,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 1,

color: "#95dcb2", // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

},

label: {

show: true,

position: "bottom",

distance: 5,

fontSize: 18,

align: "center",

},

},

],

};

此时页面展示情况如下：

关系.png

多个关系处理

从上面的图形以及数据中，我们可以看到，其实茅十八和韦小宝互相为兄弟关系的，但是上图中没有显示，如果我们去看dom节点，我们可以看到其实茅十八和韦小宝间有两条线，但是由于两间之间直线距离最短，所以echarts就直接给重合了，那么我们怎么解决呢，最简单的方式将重叠的线变成曲线，因此在options中增加曲线率即可

let options: any = {

series: [

{

type: 'graph',

layout: 'force',

nodes: nodes,

links:links,

itemStyle: {

color: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{

offset: 0,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 0.7,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 1,

color: "#95dcb2", // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

},

label: {

show: true,

position: "bottom",

distance: 5,

fontSize: 18,

align: "center",

},

autoCurveness: 0.01, //多条边的时候，自动计算曲率

},

],

};

此时页面展示为

image.png

增加关系说明以及指向

let options: any = {

series: [

{

type: 'graph',

layout: 'force',

nodes: nodes,

links: links,

itemStyle: {

color: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{

offset: 0,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 0.7,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 1,

color: "#95dcb2", // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

},

label: {

show: true,

position: "bottom",

distance: 5,

fontSize: 18,

align: "center",

},

autoCurveness: 0.01, //多条边的时候，自动计算曲率

edgeLabel: {//边的设置

show: true,

position: "middle",

fontSize: 12,

formatter: (params) => {

return params.data.relation.name;

},

},

edgeSymbol: ["circle", "arrow"], //边两边的类型

},

],

};

此时页面展示为

image.png

此时一个关系图的最基本的设置就配置完成了。

ps:可能各位按照代码敲出来的页面长这样

image.png

此时我们看图可以看到，所有的节点都挨着，所以说明节点间没有排斥力，同时关系间的线的长度都没有设置，因此直接在options增加相应的设置即可，最终的options如下

let options: any = {

series: [

{

type: 'graph',

layout: 'force',

nodes: nodes,

links: links,

itemStyle: {

color: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{

offset: 0,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 0.7,

color: "#3dd67a", // 0% 处的颜色

},

{

offset: 1,

color: "#95dcb2", // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

},

label: {

show: true,

position: "bottom",

distance: 5,

fontSize: 18,

align: "center",

},

autoCurveness: 0.01, //多条边的时候，自动计算曲率

edgeLabel: {//边的设置

show: true,

position: "middle",

fontSize: 12,

formatter: (params) => {

return params.data.relation.name;

},

},

edgeSymbol: ["circle", "arrow"], //边两边的类型

force: {

repulsion: 100,

gravity:0.01,

edgeLength:200

}

},

],

};