index.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. const $ = require("jquery");
  2. const echarts = require("echarts");
  3. require("./../css/knowledgeMap.less");
  4. require("./../css/common.css");
  5. require("ztree");
  6. require('./../resources/zTree/js/jquery.ztree.core.min.js');
  7. require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
  8. // document.write("aaaa");
  9. var myChart = echarts.init(document.getElementById('main'));
  10. option = {
  11. title: { text: '关系图谱' },
  12. tooltip: {
  13. formatter: function (x) {
  14. return x.data.des;
  15. }
  16. },
  17. series: [
  18. {
  19. type: 'graph',
  20. layout: 'force',
  21. symbolSize: 80,
  22. roam: true,
  23. edgeSymbol: ['circle', 'arrow'],
  24. edgeSymbolSize: [4, 10],
  25. edgeLabel: {
  26. normal: {
  27. textStyle: {
  28. fontSize: 20
  29. }
  30. }
  31. },
  32. force: {
  33. repulsion: 2500,
  34. edgeLength: [10, 50]
  35. },
  36. draggable: true,
  37. animation: true,
  38. hoverAnimation:true,
  39. animationDuration:5000,
  40. focusNodeAdjacency: true,
  41. itemStyle: {
  42. normal: {
  43. color: '#4b565b'
  44. }
  45. },
  46. lineStyle: {
  47. normal: {
  48. width: 2,
  49. color: '#4b565b'
  50. }
  51. },
  52. edgeLabel: {
  53. normal: {
  54. show: true,
  55. formatter: function (x) {
  56. return x.data.name;
  57. }
  58. }
  59. },
  60. label: {
  61. normal: {
  62. show: true,
  63. textStyle: {
  64. }
  65. }
  66. },
  67. data: [
  68. {
  69. name: '侯亮平',
  70. des: '最高检反贪局侦查处处长,汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争,最终将一批腐败分子送上了审判台,<br/>正义战胜邪恶,自己也迎来了成长。',
  71. symbolSize: 100,
  72. symbol:'rect',
  73. itemStyle: {
  74. normal: {
  75. color: 'red',
  76. }
  77. }
  78. }, {
  79. name: '李达康',
  80. des: '汉东省省委常委,京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛,对待身边的亲人和朋友显得有些无情。',
  81. itemStyle: {
  82. normal: {
  83. color: 'red',
  84. }
  85. }
  86. }, {
  87. name: '祁同伟',
  88. des: '汉东省公安厅厅长',
  89. symbolSize: 100
  90. }, {
  91. name: '陈岩石',
  92. des: '离休干部、汉东省检察院前常务副检察长。充满正义,平凡而普通的共 产 党人。<br/>对大老虎赵立春,以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中,老人家以耄耋高龄,<br/>义无反顾地背起了炸 药包,在反腐胜利前夕因病去世。',
  93. itemStyle: {
  94. normal: {
  95. color: 'red'
  96. }
  97. }
  98. }, {
  99. name: '陆亦可',
  100. des: '汉东省检察院反贪局一处处长',
  101. itemStyle: {
  102. normal: {
  103. color: 'red'
  104. }
  105. }
  106. }, {
  107. name: '高育良',
  108. des: '汉东省省委副书记兼政法委书记。年近六十,是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
  109. symbolSize: 100
  110. }, {
  111. name: '沙瑞金',
  112. des: '汉东省省委书记',
  113. itemStyle: {
  114. normal: {
  115. color: 'red'
  116. }
  117. }
  118. }, {
  119. name: '高小琴',
  120. des: '山水集团董事长,是一位叱咤于政界和商界的风云人物,处事圆滑、精明干练。'
  121. }, {
  122. name: '高小凤'
  123. }, {
  124. name: '赵东来',
  125. des: '汉东省京州市公安局局长,充满正义,整治恶势力,<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
  126. itemStyle: {
  127. normal: {
  128. color: 'red'
  129. }
  130. }
  131. }, {
  132. name: '程度',
  133. des: '汉东省京州市公安局光明区分局局长,因犯错误,被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下,祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责,上面也有人保他,<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
  134. }, {
  135. name: '吴惠芬',
  136. des: '汉东省省委副书记高育良的妻子,汉东大学明史教授。',
  137. itemStyle: {
  138. normal: {
  139. color: 'red'
  140. }
  141. }
  142. }, {
  143. name: '赵瑞龙',
  144. des: '副国级人物赵立春的公子哥,官二代,打着老子的旗子,<br/>黑白两道通吃,可谓呼风唤雨,权倾一时。',
  145. }, {
  146. name: '赵立春',
  147. des: '副国级领导人,曾经的改革闯将,在权利面前,显得极其渺小。',
  148. }, {
  149. name: '陈海',
  150. itemStyle: {
  151. normal: {
  152. color: 'red'
  153. }
  154. }
  155. }, {
  156. name: '梁璐',
  157. itemStyle: {
  158. normal: {
  159. color: 'red'
  160. }
  161. }
  162. }, {
  163. name: '刘新建'
  164. }, {
  165. name: '欧阳菁'
  166. }, {
  167. name: '吴心怡',
  168. itemStyle: {
  169. normal: {
  170. color: 'red'
  171. }
  172. }
  173. }, {
  174. name: '蔡成功'
  175. }, {
  176. name: '丁义珍'
  177. }
  178. ],
  179. links: [
  180. {
  181. source: '高育良',
  182. target: '侯亮平',
  183. name: '师生',
  184. des: '侯亮平是高育良的得意门生'
  185. }, {
  186. source: '高育良',
  187. target: '祁同伟',
  188. name: '师生'
  189. }, {
  190. source: '赵立春',
  191. target: '高育良',
  192. name: "前领导"
  193. }, {
  194. source: '赵立春',
  195. target: '赵瑞龙',
  196. name: "父子"
  197. }, {
  198. source: '赵立春',
  199. target: '刘新建',
  200. name: "前部队下属"
  201. }, {
  202. source: '李达康',
  203. target: '赵立春',
  204. name: "前任秘书"
  205. }, {
  206. source: '祁同伟',
  207. target: '高小琴',
  208. name: "情人"
  209. }, {
  210. source: '陈岩石',
  211. target: '陈海',
  212. name: "父子"
  213. }, {
  214. source: '陆亦可',
  215. target: '陈海',
  216. name: "属下"
  217. }, {
  218. source: '沙瑞金',
  219. target: '陈岩石',
  220. name: "故人"
  221. }, {
  222. source: '祁同伟',
  223. target: '陈海',
  224. name: "师哥"
  225. }, {
  226. source: '祁同伟',
  227. target: '侯亮平',
  228. name: "师哥"
  229. }, {
  230. source: '侯亮平',
  231. target: '陈海',
  232. name: "同学,生死朋友"
  233. }, {
  234. source: '高育良',
  235. target: '吴惠芬',
  236. name: "夫妻"
  237. }, {
  238. source: '陈海',
  239. target: '赵东来',
  240. name: "朋友"
  241. }, {
  242. source: '高小琴',
  243. target: '高小凤',
  244. name: "双胞胎",
  245. symbolSize: '1'
  246. }, {
  247. source: '赵东来',
  248. target: '陆亦可',
  249. name: "爱慕"
  250. }, {
  251. source: '祁同伟',
  252. target: '程度',
  253. name: "领导"
  254. }, {
  255. source: '高育良',
  256. target: '高小凤',
  257. name: "情人"
  258. }, {
  259. source: '赵瑞龙',
  260. target: '祁同伟',
  261. name: "勾结",
  262. symbolSize: '1',
  263. }, {
  264. source: '李达康',
  265. target: '赵东来',
  266. name: "领导"
  267. }, {
  268. source: '赵瑞龙',
  269. target: '程度',
  270. name: "领导"
  271. }, {
  272. source: '沙瑞金',
  273. target: '李达康',
  274. name: "领导"
  275. }, {
  276. source: '沙瑞金',
  277. target: '高育良',
  278. name: "领导"
  279. }, {
  280. source: '祁同伟',
  281. target: '梁璐',
  282. name: "夫妻"
  283. }, {
  284. source: '吴惠芬',
  285. target: '梁璐',
  286. name: "朋友"
  287. }, {
  288. source: '李达康',
  289. target: '欧阳菁',
  290. name: "夫妻"
  291. }, {
  292. source: '赵瑞龙',
  293. target: '刘新建',
  294. name: "洗钱工具"
  295. }, {
  296. source: '赵瑞龙',
  297. target: '高小琴',
  298. name: "勾结,腐化",
  299. symbolSize: '1'
  300. }, {
  301. source: '赵瑞龙',
  302. target: '高小凤',
  303. name: "腐化"
  304. }, {
  305. source: '吴心怡',
  306. target: '陆亦可',
  307. name: "母女"
  308. }, {
  309. source: '吴心怡',
  310. target: '吴惠芬',
  311. name: "姐妹"
  312. }, {
  313. source: '蔡成功',
  314. target: '侯亮平',
  315. name: "发小"
  316. }, {
  317. source: '蔡成功',
  318. target: '欧阳菁',
  319. name: "举报",
  320. lineStyle: {
  321. normal: {
  322. type: 'dotted',
  323. color: '#000'
  324. }
  325. }
  326. }, {
  327. source: '欧阳菁',
  328. target: '刘新建',
  329. name: "举报",
  330. lineStyle: {
  331. normal: {
  332. type: 'dotted',
  333. color: '#000'
  334. }
  335. }
  336. }, {
  337. source: '刘新建',
  338. target: '赵瑞龙',
  339. name: "举报",
  340. lineStyle: {
  341. normal: {
  342. type: 'dotted',
  343. color: '#000'
  344. }
  345. }
  346. }, {
  347. source: '李达康',
  348. target: '丁义珍',
  349. name: "领导"
  350. }, {
  351. source: '高小琴',
  352. target: '丁义珍',
  353. name: "策划出逃"
  354. }, {
  355. source: '祁同伟',
  356. target: '丁义珍',
  357. name: "勾结"
  358. }, {
  359. source: '赵瑞龙',
  360. target: '丁义珍',
  361. name: "勾结"
  362. }]
  363. }
  364. ]
  365. };
  366. myChart.setOption(option);
  367. function zTreeOnClick(event, treeId, treeNode) {
  368. alert(treeNode.id + ", " + treeNode.name);
  369. };
  370. //树的配置
  371. var setting = {
  372. //数据格式的设置
  373. data:{
  374. simpleData:{
  375. enable:true //使用简单的json数据
  376. }
  377. },
  378. //树的显示设置
  379. view:{
  380. showLine:true, //设置是否显示连线 默认为true
  381. showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
  382. dblClickExpand: false,//设置是否支持双击展开树节点
  383. fontCss : {color:"blue"},//设置节点样式
  384. expandSpeed: "slow",//设置展开的速度 fast normal slow
  385. nameIsHTML: true,//名字是否是HTML
  386. },
  387. //设置事件回调
  388. callback:{
  389. onClick:zTreeOnClick
  390. }
  391. };
  392. /**
  393. 属性说明 id 当前节点的唯一ID
  394. pId [必须大写] 代表当前节点的父节点id
  395. name:节点名称
  396. open:是否展开当前节点,默认为false
  397. isParent:true 标记当前节点是否为父节点 默认为如果当前节点下有子节点 则为true 否则为false
  398. icon:设置节点的图标地址
  399. iconOpen:设置节点展开时的图标地址 此节点必须是父节点 isParent:true
  400. iconClose:设置节点收起的的图标地地址 此节点必须是父节点 isParent:true
  401. url:点击节点打开的链接地址 如果想使用onClick:zTreeOnClick事件,就不要加url属性 或者改名字 href
  402. target:设置打开链接的方式 [在新窗口打开(_blank),要本窗口打开(_self)]
  403. **/
  404. //树的json数据
  405. var zNodes =[
  406. { id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
  407. { id:11, pId:1, name:"父节点11 - 折叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
  408. { id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
  409. { id:112, pId:11, name:"叶子节点112"},
  410. { id:113, pId:11, name:"叶子节点113"},
  411. { id:114, pId:11, name:"叶子节点114"},
  412. { id:12, pId:1, name:"父节点12 - 折叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"resources/zTree/css/zTreeStyle/img/diy/1_close.png"},
  413. { id:121, pId:12, name:"叶子节点121"},
  414. { id:122, pId:12, name:"叶子节点122"},
  415. { id:123, pId:12, name:"叶子节点123"},
  416. { id:124, pId:12, name:"叶子节点124"},
  417. { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
  418. { id:2, pId:0, name:"父节点2 - 折叠"},
  419. { id:21, pId:2, name:"父节点21 - 展开", open:true},
  420. { id:211, pId:21, name:"叶子节点211"},
  421. { id:212, pId:21, name:"叶子节点212"},
  422. { id:213, pId:21, name:"叶子节点213"},
  423. { id:214, pId:21, name:"叶子节点214"},
  424. { id:22, pId:2, name:"父节点22 - 折叠"},
  425. { id:221, pId:22, name:"叶子节点221"},
  426. { id:222, pId:22, name:"叶子节点222"},
  427. { id:223, pId:22, name:"叶子节点223"},
  428. { id:224, pId:22, name:"叶子节点224"},
  429. { id:23, pId:2, name:"父节点23 - 折叠"},
  430. { id:231, pId:23, name:"叶子节点231"},
  431. { id:232, pId:23, name:"叶子节点232"},
  432. { id:233, pId:23, name:"叶子节点233"},
  433. { id:234, pId:23, name:"叶子节点234"},
  434. { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
  435. ];
  436. $(document).ready(function(){
  437. //初始化zTree
  438. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  439. });