echarts 关系图节点重名问题解决方案！

1. 项目中用到echarts现在不足为奇，但是关系图（graph）这个东西比常规的饼图，条形图，折线图等等这些都要难搞一些，项目中会有很多需求，
2.   比如，A和B之间有多重关系能不能画两条以上的线？ 这个问题我遇到过，echarts本身就没有实现两条线以上这个功能，在官网只能找到最多两条线的demo，最后只有想其他办法解决项目需求。

3. 再比如，关系图节点名称的问题，我们一般都是把人员姓名来做显示，那么问题来了，当遇到重名的时候咋办呢？如果按照常规demo上的配置项来做肯定会报错，这也是本篇文章主要要讲的东西，我这里有两种方式来解决这个。

   ---

   第一种：先贴上代码

7.     
8.     

以上代码运行结果如下图：

 

 都有代码了，自己花点时间去研究下吧，我就不赘述了。

 

第二种方式：这种方式很简单，就是给datas里面加上一个唯一标识的，而这个字段名必须是''id''，下面也提供一个简单的例子吧。

1. option = {
2.     title: {
3.         text: 'Graph 简单示例'
4.     },
5.     tooltip: {},
6.     animationDurationUpdate: 1500,
7.     animationEasingUpdate: 'quinticInOut',
8.     series : [
9.         {
10.             type: 'graph',
11.             layout: 'none',
12.             symbolSize: 50,
13.             roam: true,
14.             label: {
15.                 normal: {
16.                     show: true
17.                 }
18.             },
19.             edgeSymbol: ['circle', 'arrow'],
20.             edgeSymbolSize: [4, 10],
21.             edgeLabel: {
22.                 normal: {
23.                     textStyle: {
24.                         fontSize: 20
25.                     }
26.                 }
27.             },
28.             data: [{
29.                 name: '节点1',
30.                 id: '120',
31.                 x: 300,
32.                 y: 300
33.             }, {
34.                 name: '节点2',
35.                 id: '121',
36.                 x: 800,
37.                 y: 300
38.             }, {
39.                 name: '节点2',
40.                 id: '123',
41.                 x: 550,
42.                 y: 100
43.             }, {
44.                 name: '节点4',
45.                 id: '124',
46.                 x: 550,
47.                 y: 500
48.             }],
49.             // links: [],
50.             links: [{
51.                 source: '120',
52.                 target: '121',
53.                 symbolSize: [5, 20],
54.                 label: {
55.                     normal: {
56.                         show: true
57.                     }
58.                 },
59.                 lineStyle: {
60.                     normal: {
61.                         width: 5,
62.                         curveness: 0.2
63.                     }
64.                 }
65.             }, {
66.                 source: '120',
67.                 target: '122',
68.                 label: {
69.                     normal: {
70.                         show: true
71.                     }
72.                 },
73.                 lineStyle: {
74.                     normal: { curveness: 0.2 }
75.                 }
76.             }, {
77.                 source: '120',
78.                 target: '123'
79.             }, {
80.                 source: '120',
81.                 target: '124'
82.             }],
83.             lineStyle: {
84.                 normal: {
85.                     opacity: 0.9,
86.                     width: 2,
87.                     curveness: 0
88.                 }
89.             }
90.         }
91.     ]
92. };

最后效果图如下：

 

谢谢大家！