Echarts关系图多重关系可视化问题解决

Echarts关系图多重关系可视化问题

问题篇

不知道大家在做echarts 关系图的时候有没有过一个问题，我们拿三国演义举一个例子，比如夏侯惇-》曹操的关系，曹操对夏侯惇既是同族关系，且又是主公的关系。那可视化的时候这两个节点之间，有2个单向的箭头，用echars可视化的时候就出现重叠问题了。
问题复现：

注意看夏侯惇到曹操的关系，文字（同族、主公）是重叠在一起的，因为两个关系是同时存在的。

解决篇

这里我给出一种我实践下来可行的办法

 //遍历原始 links 并处理
        links.forEach(link => {
          const key = `${link.source}-${link.target}`;
          // 检查是否已经存在该 source-target 的关系
          if (!relationMap[key]) {
            relationMap[key] = new Set();  // 使用 Set 来记录不同的 value
            // 将原始链接添加到结果中
            processedLinks.push(link);
          }

          // 将当前的 value 添加到 Set 中
          relationMap[key].add(link.value);

          //如果该关系的 value 数量大于 1，增加一条深绿色的关系
          if (relationMap[key].size > 1) {
            processedLinks.push({
              source: link.source,
              target: link.target,
              value: link.value,  // 深绿色关系可以不设置 value
              lineStyle: { color: 'darkgreen', width: 2, curveness: 0.1 },  // 深绿色关系
            });
          }
        });

这个代码是用javascript写的，核心就是要去判断links中是否存在重复的关系，所以用到了set，然后如果出现重复关系，则添加lineStyle，关键之处就是添加一个curveness属性。
效果

其他思考

1. 这个问题我在网上也找到了其他解决办法，可以修改echarts的源码，也是修改curveness的，没有验证，但是肯定是可行的。
2. 我还找到一种办法就是给关系增加offset偏移量，但是我试了几种办法都没有效果，不知道是不是版本原因导致的，感觉修改曲度的方法其实并不好，因为图形展示的时候曲度好像并不是固定的，所以有时候还是会重叠在一起。
3. 这个问题如果后续有其他解决方案再更新吧! ☕