Echarts学习3_echarts3.0之关系图详解

近期需要使用echarts关系图，当我打开echarts3.0官方demo后发现，对于新手而言，直接看懂有点儿难度，固写这样一篇文章让自己加深记忆，也便新手迅速上手。话不多说，开整！

echarts3.0官网提供的demo是json文件或者xml文件，我这里以json格式为例说明。echarts3.0关系图由三部分组成，关系类别、关系节点、节点之间连线。下面是代码，代码可以直接粘贴到echarts官网中执行。

[html]  view plain  copy

1. myChart.showLoading();  
2.     var webkitDep = {  
3.     "type": "force",  
4.     "categories": [//关系网类别，可以写多组  
5.         {  
6.             "name": "人物关系",//关系网名称  
7.             "keyword": {},  
8.             "base": "人物关系"  
9.         }  
10.     ],  
11.     "nodes": [//展示的节点  
12.         {  
13.             "name": "刘烨",//节点名称  
14.             "value": 3,  
15.             "category": 0//与关系网类别索引对应，此处只有一个关系网所以这里写0  
16.         },  
17.         {  
18.             "name": "霓娜",  
19.             "value": 1,  
20.             "category": 0  
21.         },  
22.         {  
23.             "name": "诺一",  
24.             "value": 1,  
25.             "category": 0  
26.         }  
27.     ],  
28.     "links": [//节点之间连接  
29.         {  
30.             "source": 0,//起始节点，0表示第一个节点  
31.             "target": 1 //目标节点，1表示与索引为1的节点进行连接  
32.         },  
33.         {  
34.             "source": 0,  
35.             "target": 2  
36.         }  
37.     ]  
38. };  
39.     myChart.hideLoading();  
40.   
41.     option = {  
42.         legend: {  
43.             data: ['人物关系']//此处的数据必须和关系网类别中name相对应  
44.         },  
45.         series: [{  
46.             type: 'graph',  
47.             layout: 'force',  
48.             animation: false,  
49.             label: {  
50.                 normal: {  
51.                     show:true,  
52.                     position: 'right'  
53.                 }  
54.             },  
55.             draggable: true,  
56.             data: webkitDep.nodes.map(function (node, idx) {  
57.                 node.id = idx;  
58.                 return node;  
59.             }),  
60.             categories: webkitDep.categories,  
61.             force: {  
62.                 edgeLength: 105,//连线的长度  
63.                 repulsion: 100  //子节点之间的间距  
64.             },  
65.             edges: webkitDep.links  
66.         }]  
67.     };  
68.     myChart.setOption(option);  

最终效果图：

可以在下面运行上面的示例，将原始代码内容换为上面的：

http://echarts.baidu.com/demo.html#graph-simple

原文来自：

http://blog.youkuaiyun.com/qq_29384639/article/details/53322142