参考博文：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>
原文地址：https://www.cnblogs.com/smartisn/p/11810778.html
时间： 2024-11-05 16:10:56