Echarts绘制关系图（一）

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

节点数据

关系数据

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附加echarts力布图配置链接

https://echarts.apache.org/zh/option.html#series-graph.type

下一章将会实现节点拖拽后固定，以及文字随缩放而变化以及将某个指定的节点定位到视图中间

使用_buildLinkShapes(nodes, links)函数，针对定义的全部线段数据，设置线段的权重（粗细）、样式和高亮样式。

1、zrender定义线段数据：

{source : 1, target : 0, weight : 1,

onclick:function(params){

alert(params.target.style.text)

},

itemStyle:{

normal:{

lineWidth:10,

text:'丽萨-乔布斯',

textColor:'#030303',

textFont:'bold 15px verdana',

textPosition:'inside'

}

}}

onclick是点击事件。onclick:function(params){alert(params.target.shape)

lineWidth是线段宽度。

text是标注的文字。

textPosition 采用的zrender中的文字位置。

定义线段事件和样式全部代码：

function _buildLinkShapes(nodes, links) {

var l = links.length

for (var i = 0i <li++) {

var link = links[i]

//var source = nodes[link.source]

// var target = nodes[link.target]

var weight = link.weight || 1

linkWeights.push(weight)

var shape = {

id : zr.newShapeId(self.type),

shape : 'line',

hoverable : false,

style : {

xStart : 0,

yStart : 0,

xEnd : 0,

yEnd : 0

},

clickable : true,

highlightStyle : {}

}

zrUtil.merge(shape.style, linkStyle)

zrUtil.merge(shape.highlightStyle, linkEmphasisStyle)

//优先级 ItemStyle >linkStyle

if (typeof(link.itemStyle) !== 'undefined') {

if(link.itemStyle.normal){

zrUtil.merge(shape.style, link.itemStyle.normal, {

overwrite : true

})

}

if(link.itemStyle.emphasis){

zrUtil.merge(

shape.highlightStyle,

link.itemStyle.emphasis,

{ overwrite : true }

)

}

}

//zhao

if (typeof (link.onclick) !== 'undefined') {

if (link.onclick) {

shape.onclick = link.onclick

}

}

linkShapes.push(shape)

self.shapeList.push(shape)

zr.addShape(shape)

}

var narr = new NDArray(linkWeights)

var max = narr.max()

if (max !== 0) {

linkWeights = narr.mul(1/max, narr).toArray()

}

}

对照pyecharts文档照猫画虎，绘制了一个文本引用关系的关系图。

按照说明文档，关系图需要的数据包括：GraphNode（节点数据项）、GraphLink（节点间的关系数据）和GraphCategory（节点分类类目），如下图。

我自己绘制的关系图如下。试了下 'symbol' 参数指定节点图形；以及将节点连线指定为由 'source' 指向 'target' 的有向图形式。

发现当GraphNode数据中存在 'id' 属性时，GraphLink中[{'source': id_x , 'target': id_y}]必须 与GraphNode的id相对应 （参见上图Pyecharts Graph: Les Miserables），而不是与 'name' 对应。

links中的数据为[{'id': '0', 'source': '1', 'target': '0'}…]

我倒是觉得这种形式的描述并不直观，不如直接[{ 'source': 'Napoleon', 'target': 'Myriel'}…]看得更明白。

实际上GraphNode和GraphLink并不需要 'id' 属性，可以直接省去也不妨事。

一开始严格按照说明文档示例 'id' = '0'，读取csv文件时加了一句 dtype=object 来指定 'id' 为字符串 '0' 而不是数字0，后来发现其实这里的数据类型对绘制关系图并无影响，类似的，节点中写成了'symbolSize': '9.4 '也不影响。

不过如前所述，其实并不需要'id'属性。

---