echarts graph关系图连线设置label不显示，以及使用formatter自定义名称获取不到name_echart graph 自定义label formatter

echarts graph关系图连线设置label不显示，以及使用formatter自定义名称获取不到name

首先，按照之前的方式设置label属性会发现，连线上的文字不会显示

label: {
              normal: {
                show: true,
                textStyle: {
                  color: 'red'
                }
              }
           }
1
2
3
4
5
6
7
8

这时候只需要将label属性修改为edgeLabel属性，

edgeLabel{
              normal: {
                show: true,
                textStyle: {
                  color: 'red'
                }
              }
           }
1
2
3
4
5
6
7
8

修改完成之后，发现连线展示的文字是一串id或者source>target,你会发现name拿不到，这时候需要对links关系数组进行筛选，如下

 edgeLabel: {
              normal: {
                show: true,
                formatter: param => {
                  var newLinks = this.chartLinks
                  var newParam = param
                  var newName = ''

                  newLinks.forEach(item => {
                   //links中筛选与当前的source和target相等的返回其name
                      if (item.source === newParam.data.source && item.target === newParam.data.target) {
                        newName = item.name
                      }
                    
                  })
                  return newName
                },
                textStyle: {
                  color: 'red'
                }
              }
           }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22