Echarts关系图实现两个节点连接同向的多条边（详细）

1、改源码

在Echarts官网上有很多关系图示例（传送门）
但是这些图两点之间最多两条边，并且方向相反。但是在社交网络分析作图时常常遇到两个人物（节点）之间存在多种关系且指向相同（方向相同的多边）。写代码过程中有意加多边然而出现覆盖现象，就算手动控制弧度也不会显示同方向边，而官方文档中并未提及相关代码。怀疑是源文件中有严格控制条件，经查阅echart源文件echarts.min.js，果然有剔除重复边的代码，如fig1红框中代码。将此限制条件注释即可实现需求。

Fig 1. 文件echarts.min.js修改处示意图

2、改弧度

虽然修改了源码，保证不会删除重复边，但还要注意重复边的覆盖，因此要修改边弧度，可以写函数控制弧度（curveness）根据边的数量增加。对此有相关博客可参阅，实例中数据较少，就直接在lineStyle中定义了，如fig2：

Fig 2. 关系边数据定义示意

3、美化

相关代码很多，大概做出来如fig3

Fig 3. 初步示例

4、交互时信息提示

Echarts官网示例上很多实用好看的交互效果，下面实现的是鼠标悬停显示边或节点的信息。

Fig 4. 添加鼠标交互代码

Fig 5. 有交互的同向多边关系图