Echarts 关系图 两个节点同向的多条边实现

效果预览: 

效果实现:

通过动态添加curveness即可实现 关系图两个节点同向的多条边,但发现layout为circular时,当仅有两个节点时,两条线会重合成直线,针对这个情况我们添加个判定把layout改为none并给两个节点赋上坐标,代码如下:

// 找source、target相同的数组的下标放到一个数组arr内,附上lineStyle,然后curveness按0.1、-0.1、0.2、-0.2...的顺序排列
          var arr = []
          for (let k=0; k<links.length; k++) {
            for (let l=k+1; l<links.length; l++) {
              if (links[k].source === links[l].source && links[k].target === links[l].target) {
                if (arr.indexOf(k) === -1) {
                  arr.push(k)
                }
                if (arr.indexOf(l) === -1) {
                  arr.push(l)
                }
              }
            }
          }
          var curveness = 0
          var num
          var layout = 'circular'
          for (num of arr) {
            relations[num].lineStyle = {}
            if (curveness > 0) {
              curveness = -curveness
            } else if (curveness <= 0) {
              curveness = -curveness + 0.1
            }
            // 判断当节点只有两个的时候,把layout改成none,并定义x,y
            if (data.length === 2) {
              data[0].x = 500
              data[0].y = 300
              data[1].x = 600
              data[1].y = 300
              layout = 'none'
             }
             relations[num].lineStyle.curveness = curveness
          }

 

### 如何在 ECharts 关系图中添加和配置多条连线 #### 创建基本的关系图表实例 为了展示如何向关系图中添加并配置多条连线,先创建一个基础的 ECharts 实例。这涉及到初始化容器以及设置一些必要的全局选项。 ```javascript // 初始化 ECharts 图表对象 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); ``` #### 配置数据集与节点间连接 定义好要显示的数据点(即节点),并通过 `links` 属性指定这些节点之间的关联。每一条可以有自己的样式和其他属性来区分不同的关系类型。 ```json option = { series: [{ type: 'graph', layout: 'force', // 使用力导向布局算法自动排列节点位置 data: [ {name: 'Node A'}, {name: 'Node B'}, {name: 'Node C'} ], links: [ {source: 'Node A', target: 'Node B', value: 10, lineStyle:{normal:{color:'red'}}}, {source: 'Node A', target: 'Node C', value: 20, lineStyle:{normal:{color:'blue'}}} ] }] }; myChart.setOption(option); ``` 上述代码片段展示了两个不同颜色的连线条目被加入到了 `'Node A'` 和其他两个目标节点之间[^1]。 #### 自定义连线上的标签或文本标注 如果希望在线上加上额外的信息比如权重或者其他描述性的文字,则可以通过调整 link 中 label 的参数来进行自定义: ```json { source: 'Node A', target: 'Node B', value: 15, label:{ normal:{ show:true, formatter:function (params){ return params.data.value + '%'; } } }, lineStyle:{ normal:{ color:'#ff7f50' } } }, ``` 这段 JSON 片段说明了怎样通过修改 `label.normal.formatter` 函数来自动生成基于特定逻辑的文字内容,并将其放置于对应的上[^2]。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值