本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制关系图，需要将series中的type设置为"graph"，
在data（nodes）中定义桑基图节点数据以及在links（edges）中节点间边的信息。
要显示关系图表，需要通过参数layout='force'设置关系图的布局方式。
force参数下的repulsion参数用于设置节点之间的斥力因子大小，值越大，节点间斥力越大，因此节点的间距也就越大。
| 参数 |
描述 |
layout |
图的布局。可选：
– – – |
force |
力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
力引导布局的结果有良好的对称性和局部聚合性，也比较美观。 |
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "关系图",
5 },
6
7 tooltip: {},
8
9 // 数据系列
10 series: [{
11 name: "关系图",
12 type: "graph",
13
14 layout:"force", // 图的布局方式
15 force:{
16 repulsion:1000 // 节点之间的斥力因子
17 },
18
19 // 关系图节点数据列表
20 data: [{
21 name: 'A'
22 }, {
23 name: 'B'
24 }, {
25 name: 'C'
26 }, {
27 name: 'D'
28 }, {
29 name: 'E'
30 }, {
31 name: 'F'
32 }, {
33 name: 'G'
34 }, {
35 name: 'H'
36 }],
37
38
39 // 节点间的边
40 links: [{
41 source: 'A',
42 target: 'B',
43 value: 10
44 }, {
45 source: 'A',
46 target: 'C',
47 value: 8
48 }, {
49 source: 'A',
50 target: 'D',
51 value: 5
52 }, {
53 source: 'A',
54 target: 'E',
55 value: 3
56 }, {
57 source: 'B',
58 target: 'D',
59 value: 2
60 }, {
61 source: 'B',
62 target: 'F',
63 value: 2
64 },{
65 source: 'B',
66 target: 'G',
67 value: 4
68 }, {
69 source: 'B',
70 target: 'H',
71 value: 4
72 }, {
73 source: 'C',
74 target: 'E',
75 value: 3
76 }, {
77 source: 'C',
78 target: 'H',
79 value: 2
80 }, {
81 source: 'D',
82 target: 'G',
83 value: 3
84 }, {
85 source: 'H',
86 target: 'f',
87 value: 4
88 }, {
89 source: 'E',
90 target: 'H',
91 value: 3
92 }, ],
93 }],
94 };
可视化结果如下图所示：
关系图样式设置：
以下是一些常用的关系图样式设置参数：
| 参数 |
描述 |
roam |
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 |
draggable |
节点是否可拖拽 |
symbol |
节点标记的图形 |
symbolSize |
节点标记的大小 |
edgeSymbol |
边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记 |
edgeSymbolSize |
边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定 |
itemStyle |
图形样式 |
lineStyle |
关系边的公用线条样式 |
label |
图形上的文本标签样式 |
edgeLabel |
关系边的文本标签样式 |
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "关系图",
5 },
6
7 tooltip: {},
8
9 // 数据系列
10 series: [{
11 name: "关系图",
12 type: "graph",
13 roam:true, // 开启鼠标缩放和平移漫游
14 draggable:true, // 节点是否可拖拽
15 symbol:"diamond", // 节点标记的图形
16 symbolSize:20, // 节点标记的大小
17 edgeSymbol:['none', 'arrow'], // 边两端的标记类型
18 edgeSymbolSize:10,// 边两端的标记大小
19 itemStyle:{
20 color:"red",
21 borderColor:"black",
22 borderWidth:2,
23 },
24 lineStyle:{
25 color:"blue", // 线的颜色
26 width:2, // 线宽
27 curveness:0.1, // 边的曲度
28 },
29 label:{
30 show:true, // 显示节点的标签
31 fontWeight:"bold", // 标签文字字体的粗细
32 },
33 edgeLabel:{
34 show:true, // 显示边的标签
35 color:"red", // 文字的颜色
36 fontWeight:"bold", // 文字字体的粗细
37 fontSize:14, // 文字字体的大小
38 },
39
40 layout:"force", // 图的布局方式
41 force:{
42 repulsion:1000 // 节点之间的斥力因子
43 },
44
45 // 关系图节点数据列表
46 data: [{
47 name: 'A'
48 }, {
49 name: 'B'
50 }, {
51 name: 'C'
52 }, {
53 name: 'D'
54 }, {
55 name: 'E'
56 }, {
57 name: 'F'
58 }, {
59 name: 'G'
60 }, {
61 name: 'H'
62 }],
63
64
65 // 节点间的边
66 links: [{
67 source: 'A',
68 target: 'B',
69 value: 10
70 }, {
71 source: 'A',
72 target: 'C',
73 value: 8
74 }, {
75 source: 'A',
76 target: 'D',
77 value: 5
78 }, {
79 source: 'A',
80 target: 'E',
81 value: 3
82 }, {
83 source: 'B',
84 target: 'D',
85 value: 2
86 }, {
87 source: 'B',
88 target: 'F',
89 value: 2
90 },{
91 source: 'B',
92 target: 'G',
93 value: 4
94 }, {
95 source: 'B',
96 target: 'H',
97 value: 4
98 }, {
99 source: 'C',
100 target: 'E',
101 value: 3
102 }, {
103 source: 'C',
104 target: 'H',
105 value: 2
106 }, {
107 source: 'D',
108 target: 'G',
109 value: 3
110 }, {
111 source: 'H',
112 target: 'f',
113 value: 4
114 }, {
115 source: 'E',
116 target: 'H',
117 value: 3
118 }, ],
119 }],
120 };
可视化结果如下图所示：
节点分类：
可以通过categories参数来设置节点分类的类目，也可以为每个目录设置节点样式。
如果节点有分类的话在data中可以通过 category 参数为每个节点指定所属类目，此时类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "关系图",
5 },
6
7 tooltip: {},
8
9 legend:{},
10
11 // 数据系列
12 series: [{
13 name: "关系图",
14 type: "graph",
15 roam: true, // 开启鼠标缩放和平移漫游
16 draggable: true, // 节点是否可拖拽
17 symbol: "diamond", // 节点标记的图形
18 symbolSize: 20, // 节点标记的大小
19 edgeSymbol: ['none', 'arrow'], // 边两端的标记类型
20 edgeSymbolSize: 10, // 边两端的标记大小
21 itemStyle: {
22 color: "red",
23 borderColor: "black",
24 borderWidth: 2,
25 },
26 lineStyle: {
27 color: "blue", // 线的颜色
28 width: 2, // 线宽
29 curveness: 0.1, // 边的曲度
30 },
31 label: {
32 show: true, // 显示节点的标签
33 fontWeight: "bold", // 标签文字字体的粗细
34 },
35 edgeLabel: {
36 show: true, // 显示边的标签
37 color: "red", // 文字的颜色
38 fontWeight: "bold", // 文字字体的粗细
39 fontSize: 14, // 文字字体的大小
40 },
41
42 // 节点分类的类目
43 categories: [{
44 name: "类别1", // 类目名称
45 itemStyle: {
46 color: "green", // 该类目节点的样式
47 borderColor: "red",
48 borderWidth: 1,
49 }
50 },{
51 name: "类别2", // 类目名称
52 itemStyle: {
53 color: "yellow", // 该类目节点的样式
54 borderColor: "red",
55 borderWidth: 1,
56 }
57 }],
58
59 layout: "force", // 图的布局方式
60 force: {
61 repulsion: 1000 // 节点之间的斥力因子
62 },
63
64 // 关系图节点数据列表
65 data: [{
66 name: 'A',
67 category:0 // 数据项所在类目的 index
68 }, {
69 name: 'B',
70 category:0 // 数据项所在类目的 index
71 }, {
72 name: 'C',
73 category:0 // 数据项所在类目的 index
74 }, {
75 name: 'D',
76 category:0 // 数据项所在类目的 index
77 }, {
78 name: 'E',
79 category:1 // 数据项所在类目的 index
80 }, {
81 name: 'F',
82 category:1 // 数据项所在类目的 index
83 }, {
84 name: 'G',
85 category:1 // 数据项所在类目的 index
86 }, {
87 name: 'H',
88 category:1 // 数据项所在类目的 index
89 }],
90
91
92 // 节点间的边
93 links: [{
94 source: 'A',
95 target: 'B',
96 value: 10
97 }, {
98 source: 'A',
99 target: 'C',
100 value: 8
101 }, {
102 source: 'A',
103 target: 'D',
104 value: 5
105 }, {
106 source: 'A',
107 target: 'E',
108 value: 3
109 }, {
110 source: 'B',
111 target: 'D',
112 value: 2
113 }, {
114 source: 'B',
115 target: 'F',
116 value: 2
117 }, {
118 source: 'B',
119 target: 'G',
120 value: 4
121 }, {
122 source: 'B',
123 target: 'H',
124 value: 4
125 }, {
126 source: 'C',
127 target: 'E',
128 value: 3
129 }, {
130 source: 'C',
131 target: 'H',
132 value: 2
133 }, {
134 source: 'D',
135 target: 'G',
136 value: 3
137 }, {
138 source: 'H',
139 target: 'f',
140 value: 4
141 }, {
142 source: 'E',
143 target: 'H',
144 value: 3
145 }, ],
146 }],
147 };
可视化结果如下图所示：
可以看到在categories中设置的节点样式覆盖掉了之前在itemStyle中设置的样式。
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
