echarts关系图图谱配置详解

**

title 图表标题样式

**

title: {
    text: "ECharts简单线形图表及其配置展示实例", //正标题
    link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
    top: 'bottom',//上下位置  
    left: 'right'//左右位置
    subtext: "From:http://www.stepday.com", //副标题
    sublink: "http://www.stepday.com", //副标题链接
    //正标题样式
    textStyle: {
        fontSize:24
    },
    //副标题样式
    subtextStyle: {
        fontSize:12,
        color:"red"
    }
},

**

tooltip 提示框配置

**

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

**

toolbox 工具箱配置

**

toolbox: {
    show : true,//是否显示工具箱
    feature : {
        magicType: ['line', 'bar'], // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
        restore: true, // 还原，复位原始图表，
        saveAsImage: true  // 保存为图片，
    }
},

**

legend:图例配置

**

legend: [{
    x: 'left',//图例位置
    data:['调研机构','接待公司']//关系图中需要与series中的categories的name保持一致
}],

**

关系边样式lineStyle

**

lineStyle: {
            normal: {
              show : true,
              color: 'target',//决定边的颜色是与起点相同还是与终点相同
              curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
            }
          },

**

图型上的文本标签样式label

**

label: {//图形上的文本标签，可用于说明图形的一些数据信息
    normal: {
        show : true,//显示
        position: 'right',//相对于节点标签的位置，默认在节点中间
        //回调函数，你期望节点标签上显示什么
        formatter: function(params){
            return params.data.label;
        },
    }
},

**

力引导图基本配置force

**

force : { //力引导图基本配置
              //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
              repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
              layoutAnimation : true
          //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                         
},

**

连接边标签edgeLabel

**

edgeLabel: {//线条的边缘标签
    normal: {
        show: true,
        //通过回调函数设置连线上的标签
        formatter: function (x) {
            return x.data.name;
        }
    }
},
edgeLabel: {
        normal: {
            textStyle: {
                fontSize: 20
             }
        }
},

**

其他

**

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

**

设置节点和连接线的提示内容的格式不同

**

node数据：
//每一个{}里面为一个节点，category（该节点类别），name（关系连接的关键字，可以理解为键值中的键，可为string也可为数字）value(节点的值，可以设置节点半径与该值的关系)，label（该字段是我用来显示该节点标签的，可以改名），除此之外大家也可以自己设置一些其他字段。
[{category:0,name: 1, value :5,label: '乔布斯'},
{category:1, name: 2,value : 2,label: '丽萨-乔布斯'},
]

link数据：
//每一个{}里面为一个关系边，source（起点，对应上面的name），target（终点，对应上面的name），value(起点到终点的距离，值越大，权重越大，距离越短)，label（显示该关系边标签，用来说明两节点之间的关系）。
{source : 2, target : 1, value : 5, label: '女儿'}

使用回调函数设置节点和连接线的提示内容：
formatter: function(params){//触发之后返回的参数，这个函数是关键
          if (params.data.category !=undefined) {//如果触发节点
            return '人物:'+params.data.label;//返回标签
          }else {//如果触发边
            return '关系:'+params.data.label;
          }
        }

**

设置节点形状和大小

**
通过node 的symbol设置节点形状， symbolSize 设置节点大小

node数据
 {
       id : 1,
       category : 1,
       name : '192.168.8.88',
       symbol : 'rect',
       value : 20,
       symbolSize : 70
},

附：
Echarts force图形小节
ECharts 实现人民的名义关系图谱 代码开源
Echarts3 关系图-力导向布局图
可展开 伸缩力导向图
echarts3生成关系网络关系力向图