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

程序珺

已于 2022-03-18 10:30:45 修改

阅读量7k

点赞数 3

分类专栏：问题文章标签： echarts javascript ecmascript

于 2022-03-18 10:30:02 首次发布

本文链接：https://blog.csdn.net/Xiaoxiao_junjun/article/details/123567473

版权

问题专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了Echarts中关系图边（edge）的label显示问题，当尝试设置label属性无效时，应改为edgeLabel。同时，详细阐述了如何通过formatter函数获取并显示links数组中的name属性，实现自定义连线名称。通过调整links数据和edgeLabel的formatter方法，可以正确显示连线上的文字，并确保文字为links数组中对应的name值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

label: {
              normal: {
                show: true,
                textStyle: {
                  color: 'red'
                }
              }
           }

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

edgeLabel{
              normal: {
                show: true,
                textStyle: {
                  color: 'red'
                }
              }
           }

修改完成之后，发现连线展示的文字是一串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'
                }
              }
           }