echarts关系图常用配置

1.图标含义
（1）节点：{a} 类目名称；{b} 节点名称 ； {c}：节点值
（2）边：{a} 系列名称；{b} 源名称-目的名称 ； {c}：边权重 ；
2.echarts数据：
（1）node数据
category：节点类别
name：关系链接的关键字
value：节点值
label（text）：展示节点标签
（2）links数据：
source：起点 （对应node name值）
target：终点（对应node name值）
value：起点到终点的距离，值越大，权重越大，距离越短
（也 可以自己写label关系）
label（显示该关系边标签，用来说明两节点之间的关系）
（3）categories:每个节点的类目，类目的样式会被应用到节点样式上【可选】

          name: v,
          itemStyle: {
            normal: {
              color: colorList[i]
            }
          }
        });
        //关系图中需要与series中的categories的name保持一致

3.tooltip提示框

          formatter: "{b}"  // 节点名称
        },
        
 tooltip: { 
     formatter: function (x) {
        return x.data.name;//设置提示框的内容和格式 节点和边都显示name属性
    }
},

4.legend图例标题

formatter:function(name){
return name//用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
},
data:['name1', 'name2', 'name3'],          //series中根据名称区分
        selectedMode: false,
          textStyle: {
            color: "#000000"
          },
          icon: "circle",
          //type: 'scroll',
          //orient: 'vertical',
          orient: "horizontal",
          left: 30,
          top: 10,
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10
 }

5.force:力引导图

              repulsion: 80,//斥力因子，值越大，斥力越大
              gravity: 0,//向中心引力因子，值越大，越往中心靠拢
              edgeLength: 150,//边的两个节点的距离，值越小，长度越长
              layoutAnimation: true//展示布局过程，当节点>100的时候不要用
            },
         

6.edgeLabel：链接边标签

              normal: {
                show: true,//是否展示连接线上面的文字
                textStyle: {
                  fontSize: 12
                },
                formatter: "{c}"  //链接线文字展示；{c}links里面的value值
                //通过回调函数设置连线上的标签
		        formatter: function (x) {
		            return x.data.label;
		        }
              }
            }

7.其他配置

draggable: true,//指示节点是否可以拖动
symbolSize: 20,//节点大小
edgeSymbol: ['circle', 'arrow'],//边两端的标记类型
edgeSymbolSize: [4, 8],//边两端的标记大小
roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
————————————————

原文链接：https://blog.csdn.net/weixin_50885665/article/details/125673261