echarts多个关系图如何实现

1.效果图

2.引入echarts

3.新建一个容器

跟其他echarts图表一样，第一步新建一个容器用来展示图；

 <div
        class="center"
        id="echarts-dot"
        style="margin-left: 20px;
  width:1000px;
  padding: 10px;
  position: relative;
  height: 700px;"
      ></div
1
2
3
4
5
6
7
8
9

4.初始化图表

这里的id名称一定要对上哦~

 var myChart = echarts.init(document.getElementById("echarts-dot"));
1

5.设置配置项

这都是在一个方法里面的；里面的data数据 ，我是自己建的，没有拿后台的；

var option = {
        title: {
          text: ""
        },
        color: ["#BB8FCE", "#0099FF", "#5DADE2"],
        tooltip: {},
        animationDurationUpdate: 1500,
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12
            }
          }
        },
        series: [
          {
            type: "graph",
            layout: "force", //采用力引导布局
            symbolSize: 80,
            legendHoverLink: true, //启用图例 hover 时的联动高亮。
            focusNodeAdjacency: false, //在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            roam: true,
            center: [680.44, "30%"],
            label: {
              normal: {
                show: true,
                color: "#ffffff",
                position: "inside",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            force: {
              repulsion: 1200,
              gravity: 0.3,
              edgeLength: [100, 500]
            },
            edgeLabel: {
              normal: {
                show: true,
                color: "#ffffff",
                textStyle: {
                  fontSize: 10
                },
                formatter: "{c}"
              }
            },
            categories: ["机构", "文献", "人员"],
            data: data.datas,
            links: data.lines,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                type: "dashed",
                curveness: 0
              }
            }
          },
          {
            force: {
              repulsion: 1500,
              gravity: 0.2,
              //关系线的长度
              edgeLength: 200
            },
            center: [150.97, "40%"],
            type: "graph",
            layout: "force", //采用力引导布局
            legendHoverLink: true, //启用图例 hover 时的联动高亮。
            focusNodeAdjacency: false, //在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            roam: true,
            label: {
              normal: {
                color: "#ffffff",
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            edgeSymbolSize: [4, 50],
            edgeLabel: {
              normal: {
                show: true,
                color: "#ffffff",
                textStyle: {
                  fontSize: 10
                },
                formatter: "{c}"
              }
            },
            categories: ["机构", "文献", "人员"],
            data: data.datas2,
            links: data.lines2,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                type: "dashed",
                curveness: 0
              }
            }
          },
          {
            symbolOffset: [50, "-50%"],
            force: {
              repulsion: 500,
              gravity: 0.1,
              //关系线的长度
              edgeLength: [100, 200]
            },
            center: [620.44, "80%"],
            type: "graph",
            layout: "force", //采用力引导布局
            symbolSize: 50,
            legendHoverLink: true, //启用图例 hover 时的联动高亮。
            focusNodeAdjacency: false, //在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            roam: true,
            label: {
              normal: {
                color: "#ffffff",
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            edgeSymbolSize: [4, 50],
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10
                },
                formatter: "{c}"
              }
            },
            categories: ["机构", "文献", "人员"],
            data: data.datas3,
            links: data.lines3,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0
              }
            }
          }
        ]
      };
      myChart.resize();
      myChart.setOption(option);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

6.分析其中一个配置项

这样的一个项，就对应我的那个关系图的一个；它里面的links就是关系，意思是谁对应谁；
里面有一些配置都是需要在文档中一个个的找到 然后进行设置的
echarts官网文档关系图

这里用到的时候力引导布局；所以要看这个设置

大概看一下数据结构吧。这个是关系的结构

这里是数据结构

记得写上这个加载方法哦！