echarts带双向箭头方向关系图

最近有一个需求，想要一个拓扑图，布局是中间一个中心节点，其余节点在周围呈环状排列，节点最多大约三十来个，由于展示区域大小有限，数量较多时，大概呈现方式是，中间中心节点，外围分小圈，大圈两个环状排列。

参考demo：ChartLib

在chartlib中看到的demo是通过计算方式得到平均角度值，使用极坐标方式呈现。以下代码块也是基于这个demo来修改

这个demo略微有一点问题就是，当外围节点数量为2,3,6个的时候会出现节点重叠问题，另外就是如上图这种节点分布不均情况，把这个稍微优化一下，在demo中计算角度的地方修改一下

for (let i = 0; i < nodes.length; i++) {nodes[i].angle = (360 / nodes.length * i) == 0 ? 360 : (360 / nodes.length * i)
}

这样的之后，问题就是：因为只有一个角度和半径参数，所以是按照同一个半径长度展现，展示的节点数量有限，想展示多一些节点，就让一部分节点的半径短一点就可以了

for (var j = 0; j < nodes.length; j++) {let a;if (j%2 == 0) {a = 1} else {a = 0.6}var node = {name: nodes[j].name,value: nodes[j].value || [a, nodes[j].angle],symbolSize: 50,itemStyle: {normal: {color: '#12b5d0',}}}dataMap.set(nodes[j].name, node.value)charts.nodes.push(node)
}

这样操作之后，在节点数量较多的时候就会让节点以一个较长半径，紧接着一个较短半径的方式展示。可以通过判断一下节点数量，节点较少的话展示同样半径，节点较多时候展示不同半径。

基本上就是这样，以下是记录的一些小的点

双箭头就添加两组type是lines的数据就可以了

关于图层展示，就把ype是lines的数据放在series的前边，type是graph的数据放在series的最后就可以了，这样就可以把贴图压在箭头连线上边，更美观一点

关于插入的图片方面，UI原来设计的是各个节点背景图都是在旋转，但是发现插入动图无效，遂作罢。但是中心节点倒是可以操作一下。写一个标签，把各种动态效果包在里边，然后野蛮定位到echarts图的中间

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！