Echarts——关系图（人民的名义为例，简化）源码

参考博文：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">
 15         var myChart = echarts.init(document.getElementById('main'));
 16         option = {
 17             title: { text: '人民的名义关系图谱' },
 18             tooltip: {
 19                 formatter: function (x) {
 20                     return x.data.des;
 21                 }
 22             },
 23             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: '侯亮平',
 73                             des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
 74                             symbolSize: 100,
 75                             itemStyle: {
 76                                 normal: {
 77                                     color: 'red'
 78                                 }
 79                             }
 80                         }, {
 81                             name: '李达康',
 82                             des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
 83                             itemStyle: {
 84                                 normal: {
 85                                     color: 'red'
 86                                 }
 87                             }
 88                         },
 89                         {
 90                             name:'周博',
 91                             des:'最厉害',
 92                             symbolSize:100
 93                         }
 94                     ],
 95                     links: [
 96                         {
 97                             source: '李达康',
 98                             target: '侯亮平',
 99                             name: '师生',
100                             des: '侯亮平是高育良的得意门生'
101                                 
102                         },
103                         {
104                             source:'周博',
105                             target:'李达康',
106                             name:'无',
107                              symbolSize: '5',
108                              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——关系图（人民的名义为例，简化）源码

猜你喜欢
