1.1 版本

1.2 应用场景

 本文将使用 ECharts 图表引用模板数据集制作一个关系图：

2.1 准备数据

1）点击设计器左上角「文件>新建普通报表」。

2）准备数据：需准备一个节点表，和一个关系表。本示例使用 内置数据集 制作简单测试数据，仅展示数据结构，具体可以自己实现。

• 节点表：ds1
  

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

注：value 是关键字，等同于节点排序ID，一定要从 0 开始计数，方便后续数组的关系线的定位。

• 关系表：ds2

SOURCE 为关联线起点，TARGET为关联线终点。

关系分两层，第一层为 接待与销售，第二层为 销售与客户。

3）插入图表：选中A1单元格，调整宽高。点击插入图表，选择「ECharts图表」。

2.2 设置图表

2.2.1 添加数据结构

1）选中图表，点击右侧「单元格元素>配置」，添加一个「二维数组结构」。

2）选择数据集 ds1，计算方式选择「明细计算」，将数据集中字段全部勾选添加即可。

3）数据集 ds2 重复相同操作即可。

2.2.2 编辑代码

代码实现功能点：

• 支撑悬浮提示；

• 支持选中拖拉拽；

• 支持下载为图片以及重新刷新布局；

• 其他参照 echars 代码注释。

点击「代码编辑器」，输入代码：

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[1],  
    target: item[0]  
  };
})
   
 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
        }]
    };

效果如下图所示：

点击下载模板：ECharts关系图谱示例.cpt