最近在做关系图谱，涉及到三种对象，分别是 接待人员、销售人员以及客户；

项目的核心展现工具是帆软report 10，但是帆软的关系图，比较粗糙，所以想把echars 中的引力关系图和帆软报表结合。

有几个难点：

1.帆软echars插件，目前从帮助文档，基本都是XY型的；

2.帆软echars组件提供的数据集合的方式是数组[[],[],[]]，而echars引力关系图是对象{{}，{}，{}}。

后续通过 echars的代码、帆软的代码编辑框以及JS代码，突破了上述问题。

最终成果图 （关闭 节点标签，进行脱敏）

 上图，关闭节点标签。位置代码：false 不显示，true 显示

label: {
                normal: {
                    show:false,
                    position: 'right',formatter: '{b}'
                }
            },

设置为true，节点有标签

功能点：

1.支撑悬浮提示；

2.支持选中拖拉拽；

3.支持下载为图片以及重新刷新布局

开发步骤：

一、数据库表结构

1.nodes

CATEGORY 的值 分别是 0,1,2；作为人员类别；0为接待、1为销售、2为客户；

2.links

分两层，第一层为 接待与销售，第二层为 销售与客户；

SOURCE 为引力线 起始点，TARGET为引力线终点；

二、帆软数据

1.创建数据集，比较简单select * from table 就能完成

2.帆软 echars 二维数组，节点 nodes

帆软 echars 二维数组2，

 代码如下

var TABLE_DATA = getData("data1");
var TABLE_DATA1 = getData("data2");
var columnValues = TABLE_DATA.slice(1);//屏蔽帆软数据自带的系列名
var columnValues1 = TABLE_DATA1.slice(1);
var nodes = columnValues.map(function(item){
return   {  
    name: item[0],  
    VALUE: item[1],  
    category: item[2]  
  };//遍历数组，将大数组改为对象数组
})
var links = columnValues1.map(function(item){
return   {  
    source: item[0],  
    target: item[1]  
  };
})
   
 var webkitDep = {
    "type": "force",
    "categories": [//关系网类别，可以写多组
        {
            "name": "服务-接待" //关系网名称
       
        },
		   {
            "name": "销售-渠道" //关系网名称
 
        },
		   {
            "name": "订单-顾客" //关系网名称

        }
    ],
   "nodes":  nodes,//直接引用上述对象数组
    "links":  links
};
  
 
    option = {
	symbolSize: 50,
        legend: {
            data: ['服务-接待','销售-渠道','订单-顾客',]//此处的数据必须和关系网类别中name相对应
        },
		 title: {
            text: '销售关系图谱'
        } ,
		    toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
		    tooltip: {
        show: true, //默认值为true
        showContent: true, //是否显示提示框浮层
        trigger: "item", //触发类型，默认数据项触发
        triggerOn: "mousemove", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
        alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
        showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
        hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
        enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
        position: "right", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
        confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
        transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        },
	 
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
 
		  focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
          // 线条样式
          lineStyle: {
            width: 1,
            color: "#555555",
            curveness: 0, // 线条的曲线程度，从0到1 ---  不加弧度，两节点互相指向时，线上的字会重叠
            emphasis: {
              //高亮状态
              width: 8,
            },
          },
            label: {
                normal: {
                    show:true,
                    position: 'right',formatter: '{b}'
                }
            },
            draggable: true,
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                edgeLength: 105,//连线的长度
                repulsion: 100  //子节点之间的间距
            },
            edges: webkitDep.links
        }]
    };