Echarts-- diagram (name of the people, for example, simplified) Source

Reference Hirofumi: Https://Www.Cnblogs.Com/emrys5/p/echart-relationship-map.Html
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta name="viewport" content="width=device-width" />
  5     <title>ECharts 实现人民的名义关系图谱</title>
  6     <script src="jquery-1.10.2.min.js"></script>
  7     <script src="echarts.min.js"></script>
  8     <style type="text/css">
  9         html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }
 10     </style>
 11 </head>
 12 <body>
 13     <div id="main" style=""></div>
 14     <script type="text/javascript">
bridesmaid15         myChart = echarts.init (document.getElementById ( ' main ' ));
 16          Option = {
 . 17              title: {text: ' People nominal relationship map ' },
 18 is              ToolTip: {
 . 19                  Formatter: function (X) {
 20 is                      return X .data.des;
 21 is                  }
 22 is              },
 23 is              Series: [
 24                  {
 25                      type: ' Graph ',
 26                     layout: 'force',
 27                     symbolSize: 80,
 28                     roam: true,
 29                     edgeSymbol: ['circle', 'arrow'],
 30                     edgeSymbolSize: [4, 10],
 31                     edgeLabel: {
 32                         normal: {
 33                             textStyle: {
 34                                 fontSize: 20
 35                             }
 36                         }
 37                     },
 38                     force: {
 39                         repulsion: 2500,
 40                         edgeLength: [10, 50]
 41                     },
 42                     draggable: true,
 43                     itemStyle: {
 44                         normal: {
 45                             color: '#4b565b'
 46                         }
 47                     },
 48                     lineStyle: {
 49                         normal: {
 50                             width: 2,
 51                             color: '#4b565b'
 52 
 53                         }
 54                     },
 55                     edgeLabel: {
 56                         normal: {
 57                             show: true,
 58                             formatter: function (x) {
 59                                 return x.data.name;
 60                             }
 61                         }
 62                     },
 63                     label: {
 64                         normal: {
 65                             show: true,
 66                             textStyle: {
 67                             }
 68                         }
 69                     },
 70                     data: [
 71                         {
 72                              name: ' Hou Liang Ping ' ,
 73                              des: ' Director of Investigation Department Supreme Procuratorate Anti-Corruption Bureau, Han Dong Province People's Procuratorate Deputy Attorney General and Director Anti-Corruption Bureau. <br/> a struggle with corruption offenders, and eventually a group of corrupt elements brought to trial, <br/> triumph of good over evil, and he ushered in growth. ' ,
 74                              SymbolSize: 100 ,
 75                              ItemStyle: {
 76                                  Normal: {
 77                                      Color: ' Red ' 
78                                  }
 79                              }
 80                         }, {
 81                              name: ' Lida Kang ' ,
 82                              des: ' Han Dong Provincial Party Committee, Party Secretary of Beijing City. Justice is a selfless good officer. <br/> but the man was too care of their feathers, treat family and friends around a bit heartless. ' ,
 83                              ItemStyle: {
 84                                  Normal: {
 85                                      Color: ' Red ' 
86                                  }
 87                              }
 88                          },
 89                          {
 90                             name: ' Zhou Bo ' ,
 91 is                              des: ' most powerful ' ,
 92                              SymbolSize: 100 
93                          }
 94                      ],
 95                      links: [
 96                          {
 97                              Source: ' Li Dakang ' ,
 98                              target: ' HOU Ryohei ' ,
 99                              name: 'Teachers and students ' ,
 100                              des: ' HOU Ryohei high fertility good protégé ' 
101                                  
102                          },
 103                          {
 104                              Source: ' Zhou Bo ' ,
 105                              target: ' Li Dakang ' ,
 106                              name: ' No ' ,
 107                               SymbolSize: ' . 5 ' ,
 108                               the lineStyle: {
109                                  normal: {
110                                      type: 'dotted',
111                                      color: '#000'
112                                  }
113                              }
114                         }]
115                 }
116             ]
117         };
118         myChart.setOption(option);
119     </script>
120 </body>
121 </html>
Echarts-- diagram (name of the people, for example, simplified) Source

Guess you like
