标签：博文 circle dev content symbol ret format tool css
参考博文：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>
标签：博文 circle dev content symbol ret format tool css
原文地址：https://www.cnblogs.com/smartisn/p/11810778.html
