如何用EChart实现 loop 类型的 edge

场景

在使用 echarts 4 绘制关系图时，遇到了需要绘制边缘的源和目标相同的情况（如图中所示）。但是，目前为止，使用 echarts 无法呈现这种情况。那么，如何解决这个问题呢？

实现

通过查看源代码，发现它实际上已经绘制，只是没有曲线，而是绘制成了一个点，所以通常看不到（如下图所示）。

为了达到上面的效果，想了一个“曲线救国”的方法。其实思路很简单，就是用边缘中的一个端点使用 loop 样式的图标来替换。

if (item.source === item.target) {
    item.symbolSize = [0, 36];
    // loop线的path替代symbol
    item.symbol = [
        '',
        'path://M220.3619877 750.04089535c44.73206168 6.77758488 89.46412337 0 128.77411734-20.33275554L826.27809759 510.11438191l-489.34164606-212.81617298c-37.95447681-16.2662041-77.26447033-23.04378942-116.57446383-18.9772384C-62.94107071 298.65372564-64.29658744 712.08641855 220.3619877 750.04089535z m2.71103386-441.89855051c35.24344249-2.71103431 69.13136828 4.06655102 101.66377645 17.62172169L749.01362727 511.46989863 335.58093436 702.59779934c-35.24344249 16.26620407-73.19791928 21.68827272-111.15239563 16.26620454-124.70756631-16.26620454-185.70583255-112.50791326-185.70583255-210.10513866 0-97.59722542 62.35378338-189.77238356 184.35031539-200.61652037z'
    ];
}

结尾彩蛋

值得一提的是，这个问题貌似已经在下个 5.4 版本解决了，目前还没正式发布。但是，仍然可以使用上面的方法来解决该问题。