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