sanlian.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. //
  2. // 路径配置
  3. require.config({
  4. paths: {
  5. echarts: 'http://echarts.baidu.com/build/dist'
  6. }
  7. });
  8. var nodes = [];
  9. var links = [];
  10. var constMaxDepth = 2;
  11. var constMaxChildren = 7;
  12. var constMinChildren = 4;
  13. var constMaxRadius = 10;
  14. var constMinRadius = 2;
  15. nodes = [//展示的节点
  16. {
  17. "name": "齐悦科技",//节点名称
  18. "value": 43,
  19. "depth": 0,
  20. "id": 0,
  21. "category": 3//与关系网类别索引对应,此处只有一个关系网所以这里写0
  22. },
  23. {
  24. "name": "股权链",
  25. "value": 20,
  26. "category": 2,
  27. "depth": 1,
  28. "id": 1,
  29. },
  30. {
  31. "name": "信用链",
  32. "value": 20,
  33. "category": 2,
  34. "depth": 2,
  35. "id": 2,
  36. },
  37. {
  38. "name": "股东",
  39. "value": 10,
  40. "category": 1 ,
  41. "depth": 1,
  42. "id": 3
  43. },{
  44. "name": "愉悦投资66.67%",
  45. "value": 3,
  46. "category": 0 ,
  47. "depth": 1,
  48. "id": 4
  49. },{
  50. "name": "愉悦投资33.33%",
  51. "value": 3,
  52. "category": 0 ,
  53. "depth": 1,
  54. "id": 5
  55. },{
  56. "name": "供应链",
  57. "value": 20,
  58. "category": 2,
  59. "depth": 3,
  60. "id": 6,
  61. },
  62. {
  63. "name": "控股公司",
  64. "value": 10,
  65. "category": 1 ,
  66. "depth": 1,
  67. "id": 7
  68. },{
  69. "name": "愉悦家纺100%",
  70. "value": 3,
  71. "category": 0 ,
  72. "depth": 1,
  73. "id": 8
  74. },{
  75. "name": "东力热电45%",
  76. "value": 3,
  77. "category": 0 ,
  78. "depth": 1,
  79. "id": 9
  80. },{
  81. "name": "愉悦物流60%",
  82. "value": 3,
  83. "category": 0 ,
  84. "depth": 1,
  85. "id": 10
  86. },{
  87. "name": "居家悦品90%",
  88. "value": 3,
  89. "category": 0 ,
  90. "depth": 1,
  91. "id": 11
  92. },{
  93. "name": "黄河三角洲19.29%",
  94. "value": 3,
  95. "category": 0 ,
  96. "depth": 1,
  97. "id": 12
  98. },{
  99. "name": "关联公司",
  100. "value": 10,
  101. "category": 1 ,
  102. "depth": 2,
  103. "id": 13
  104. }
  105. ,{
  106. "name": "银行借款",
  107. "value": 10,
  108. "category": 1 ,
  109. "depth": 2,
  110. "id": 14
  111. },{
  112. "name": "银行授信",
  113. "value": 10,
  114. "category": 1 ,
  115. "depth": 2,
  116. "id": 15
  117. },{
  118. "name": "存续债券",
  119. "value": 10,
  120. "category": 1 ,
  121. "depth": 2,
  122. "id": 16
  123. },{
  124. "name": "担保类系链",
  125. "value": 10,
  126. "category": 1 ,
  127. "depth": 2,
  128. "id": 17
  129. },{
  130. "name": "滨印集团28%",
  131. "value": 3,
  132. "category": 0 ,
  133. "depth": 2,
  134. "id": 18
  135. },{
  136. "name": "17齐悦0183%",
  137. "value": 3,
  138. "category": 0 ,
  139. "depth": 2,
  140. "id": 19
  141. },{
  142. "name": "上游",
  143. "value": 10,
  144. "category": 1 ,
  145. "depth": 3,
  146. "id": 20
  147. },{
  148. "name": "下游",
  149. "value": 10,
  150. "category": 1 ,
  151. "depth": 3,
  152. "id": 21
  153. },{
  154. "name": "铜陵华源麻业9.86%",
  155. "value": 3,
  156. "category": 0 ,
  157. "depth": 3,
  158. "id": 22
  159. },{
  160. "name": "邹平泰升纺织7.31%",
  161. "value": 3,
  162. "category": 0 ,
  163. "depth": 3,
  164. "id": 23
  165. },{
  166. "name": "荆州福瑞源纺织6.93%",
  167. "value": 3,
  168. "category": 0 ,
  169. "depth": 3,
  170. "id": 24
  171. },{
  172. "name": "山东祥瑞祥纺织6.55%",
  173. "value": 3,
  174. "category": 0 ,
  175. "depth": 3,
  176. "id": 25
  177. },{
  178. "name": "江苏明源纺织6.31%",
  179. "value": 3,
  180. "category": 0 ,
  181. "depth": 3,
  182. "id": 26
  183. },{
  184. "name": "IKEA Supply AG18.45%",
  185. "value": 3,
  186. "category": 0 ,
  187. "depth": 3,
  188. "id": 27
  189. },{
  190. "name": "威海海思5.74%",
  191. "value": 3,
  192. "category": 0 ,
  193. "depth": 3,
  194. "id": 28
  195. },{
  196. "name": "圣美伦5.62%",
  197. "value": 3,
  198. "category": 0 ,
  199. "depth": 3,
  200. "id": 29
  201. },{
  202. "name": "威海润凡4.16%",
  203. "value": 3,
  204. "category": 0 ,
  205. "depth": 3,
  206. "id": 30
  207. },{
  208. "name": "宜家分拨(上海)3.79%",
  209. "value": 3,
  210. "category": 0 ,
  211. "depth": 3,
  212. "id": 31
  213. }
  214. ];
  215. links = [//节点之间连接
  216. {
  217. "source": 0,//起始节点,0表示第一个节点
  218. "target": 1,
  219. "weight": 1
  220. },
  221. {
  222. "source": 0,
  223. "target": 2
  224. },
  225. {
  226. "source": 0,//起始节点,0表示第一个节点
  227. "target": 6,
  228. "weight": 1
  229. },{
  230. "source": 1,
  231. "target": 3
  232. },{
  233. "source": 1,
  234. "target": 7
  235. },{
  236. "source": 3,
  237. "target": 4
  238. }
  239. ,{
  240. "source": 3,
  241. "target": 5
  242. },{
  243. "source": 7,
  244. "target": 8
  245. },{
  246. "source": 7,
  247. "target": 9
  248. },
  249. {
  250. "source": 7,
  251. "target": 10
  252. },{
  253. "source": 7,
  254. "target": 11
  255. },{
  256. "source": 7,
  257. "target": 12
  258. },{
  259. "source": 2,
  260. "target": 13
  261. },{
  262. "source": 2,
  263. "target": 14
  264. },{
  265. "source": 2,
  266. "target": 15
  267. },{
  268. "source": 2,
  269. "target": 16
  270. },{
  271. "source": 2,
  272. "target": 17
  273. },{
  274. "source": 17,
  275. "target": 18
  276. },{
  277. "source": 16,
  278. "target": 19
  279. },{
  280. "source": 6,
  281. "target": 20
  282. },{
  283. "source": 6,
  284. "target": 21
  285. },{
  286. "source": 20,
  287. "target": 22
  288. },{
  289. "source": 20,
  290. "target": 23
  291. },{
  292. "source": 20,
  293. "target": 24
  294. },{
  295. "source": 20,
  296. "target": 25
  297. },{
  298. "source": 20,
  299. "target": 26
  300. },{
  301. "source": 21,
  302. "target": 27
  303. },{
  304. "source": 21,
  305. "target": 28
  306. },{
  307. "source": 21,
  308. "target": 29
  309. },{
  310. "source": 21,
  311. "target": 30
  312. },{
  313. "source": 21,
  314. "target": 31
  315. },{
  316. "source": 21,
  317. "target": 32
  318. }
  319. ]
  320. for(var i=0; i<nodes.length; i++){
  321. if(nodes[i].id == "0"){
  322. nodes[i].itemStyle = {
  323. normal: {
  324. borderColor: '#000',
  325. color:'blue',
  326. label: {
  327. show: true,
  328. }
  329. }
  330. }
  331. }
  332. else if(nodes[i].id == "22"){
  333. nodes[i].itemStyle = {
  334. normal: {
  335. label: {
  336. show: true,
  337. textStyle:{
  338. color:'yellow'
  339. }
  340. },
  341. }
  342. }
  343. }
  344. //22
  345. nodes[i]["symbolSize"] = nodes[i].value *1.2;
  346. }
  347. console.log(nodes);
  348. require(
  349. [
  350. 'echarts',
  351. 'echarts/chart/force' // 使用柱状图就加载bar模块,按需加载
  352. ],
  353. function (ec) {
  354. // 基于准备好的dom,初始化echarts图表
  355. var guanxi = ec.init(document.getElementById('guanxi'));
  356. option3 = {
  357. title : {
  358. x:'right',
  359. y:'bottom'
  360. },
  361. tooltip : {
  362. trigger: 'item',
  363. formatter: '{b}'
  364. },
  365. toolbox: {
  366. show : true,
  367. feature : {
  368. restore : {show: true},
  369. magicType: {show: true, type: ['force', 'chord']},
  370. saveAsImage : {show: true}
  371. }
  372. },
  373. legend: {
  374. x: 'left',
  375. data:['四级','三级', '二级'],
  376. orient: 'left',
  377. x: 10,
  378. y: 10,
  379. textStyle: {
  380. fontSize: '14',
  381. color: '#fff'
  382. },
  383. },
  384. series : [
  385. {
  386. type:'force',
  387. name : "Force tree",
  388. ribbonType: false,
  389. categories : [
  390. {
  391. name: '四级'
  392. },
  393. {
  394. name: '三级'
  395. },
  396. {
  397. name: '二级'
  398. }
  399. ],
  400. itemStyle: {
  401. normal: {
  402. label: {
  403. show: true,
  404. textStyle:{
  405. color:'#fff'
  406. }
  407. },
  408. nodeStyle : {
  409. brushType : 'both',
  410. borderColor : 'rgba(255,215,0,0.6)',
  411. borderWidth : 1
  412. }
  413. }
  414. },
  415. minRadius : constMinRadius,
  416. maxRadius : constMaxRadius,
  417. symbolSize: function (params) {
  418. console.log(params)
  419. },
  420. coolDown: 0.995,
  421. steps: 10,
  422. nodes : nodes,
  423. links : links,
  424. steps: 1
  425. }
  426. ]
  427. };
  428. console.log(option3)
  429. guanxi.setOption(option3);
  430. });