ECharts 实现人民的名义关系图谱 代码开源
生活随笔
收集整理的這篇文章主要介紹了
ECharts 实现人民的名义关系图谱 代码开源
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、什么是ECharts
ECharts是百度開源的純 Javascript 圖表庫，目前開源可以與highcharts相匹敵的一個圖表庫，相信有很多國內用戶使用。
官網?http://echarts.baidu.com/
?
2、開始簡單配置關系圖
1、首先配置series的type為graph。
2、layout為force，layout可以選擇none、circular和force
'none' 不采用任何布局，使用節點中提供的 x， y 作為節點的位置。
'circular' 采用環形布局。
'force' 采用力引導布局。
來自官方文檔
2、設置鼠標移動到人物處顯示人物簡介tooltip
tooltip: {formatter: function (x) {return x.data.des;} }?
3、設置data?
{name: '侯亮平',des: '最高檢反貪局偵查處處長，漢東省人民檢察院副檢察長兼反貪局局長。<br/>經過與腐敗違法分子的斗爭，最終將一批腐敗分子送上了審判臺，<br/>正義戰勝邪惡，自己也迎來了成長。',symbolSize: 100,itemStyle: {normal: {color: 'red'}} }?
4、設置關系
{source: '高育良',target: '侯亮平',name: '師生',des: '侯亮平是高育良的得意門生' }?
3、完整代碼
<!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width" /><title>ECharts 實現人民的名義關系圖譜</title><script src="jquery-1.10.2.min.js"></script><script src="echarts.min.js"></script><style type="text/css">html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }</style> </head> <body><div id="main" style=""></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));option = {title: { text: '人民的名義關系圖譜' },tooltip: {formatter: function (x) {return x.data.des;}},series: [{type: 'graph',layout: 'force',symbolSize: 80,roam: true,edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [4, 10],edgeLabel: {normal: {textStyle: {fontSize: 20}}},force: {repulsion: 2500,edgeLength: [10, 50]},draggable: true,itemStyle: {normal: {color: '#4b565b'}},lineStyle: {normal: {width: 2,color: '#4b565b'}},edgeLabel: {normal: {show: true,formatter: function (x) {return x.data.name;}}},label: {normal: {show: true,textStyle: {}}},data: [{name: '侯亮平',des: '最高檢反貪局偵查處處長，漢東省人民檢察院副檢察長兼反貪局局長。<br/>經過與腐敗違法分子的斗爭，最終將一批腐敗分子送上了審判臺，<br/>正義戰勝邪惡，自己也迎來了成長。',symbolSize: 100,itemStyle: {normal: {color: 'red'}}}, {name: '李達康',des: '漢東省省委常委，京州市市委書記。是一個正義無私的好官。<br/>但為人過于愛惜自己的羽毛，對待身邊的親人和朋友顯得有些無情。',itemStyle: {normal: {color: 'red'}}}, {name: '祁同偉',des: '漢東省公安廳廳長',symbolSize: 100}, {name: '陳巖石',des: '離休干部、漢東省檢察院前常務副檢察長。充滿正義，平凡而普通的共 產 黨人。<br/>對大老虎趙立春，以各種形式執著舉報了十二年。<br/>在這場關系黨和國家生死存亡的斗爭中，老人家以耄耋高齡，<br/>義無反顧地背起了炸 藥包，在反腐勝利前夕因病去世。',itemStyle: {normal: {color: 'red'}}}, {name: '陸亦可',des: '漢東省檢察院反貪局一處處長',itemStyle: {normal: {color: 'red'}}}, {name: '高育良',des: '漢東省省委副書記兼政法委書記。年近六十，是一個擅長太極功夫的官場老手。侯亮平、陳海和祁同偉是其學生。',symbolSize: 100}, {name: '沙瑞金',des: '漢東省省委書記',itemStyle: {normal: {color: 'red'}}}, {name: '高小琴',des: '山水集團董事長，是一位叱咤于政界和商界的風云人物，處事圓滑、精明干練。'}, {name: '高小鳳'}, {name: '趙東來',des: '漢東省京州市公安局局長，充滿正義，整治惡勢力，<br/>在與檢察部門的合作中從最初的質疑到之后的通力配合。',itemStyle: {normal: {color: 'red'}}}, {name: '程度',des: '漢東省京州市公安局光明區分局局長，因犯錯誤，被李達康書記和趙東來局長點名要清除公安隊伍。<br/>但在高小琴的幫助下，祁同偉調他當上了省公安廳辦公室副主任。<br/>盡管程度逃避了所有罪責，上面也有人保他，<br/>但最終還是在反貪局局長侯亮平的縝密偵查下被繩之于法。',}, {name: '吳惠芬',des: '漢東省省委副書記高育良的妻子，漢東大學明史教授。',itemStyle: {normal: {color: 'red'}}}, {name: '趙瑞龍',des: '副國級人物趙立春的公子哥，官二代，打著老子的旗子，<br/>黑白兩道通吃，可謂呼風喚雨，權傾一時。',}, {name: '趙立春',des: '副國級領導人，曾經的改革闖將，在權利面前，顯得極其渺小。',}, {name: '陳海',itemStyle: {normal: {color: 'red'}}}, {name: '梁璐',itemStyle: {normal: {color: 'red'}}}, {name: '劉新建'}, {name: '歐陽菁'}, {name: '吳心怡',itemStyle: {normal: {color: 'red'}}}, {name: '蔡成功'}, {name: '丁義珍'}],links: [{source: '高育良',target: '侯亮平',name: '師生',des: '侯亮平是高育良的得意門生'}, {source: '高育良',target: '祁同偉',name: '師生'}, {source: '趙立春',target: '高育良',name: "前領導"}, {source: '趙立春',target: '趙瑞龍',name: "父子"}, {source: '趙立春',target: '劉新建',name: "前部隊下屬"}, {source: '李達康',target: '趙立春',name: "前任秘書"}, {source: '祁同偉',target: '高小琴',name: "情人"}, {source: '陳巖石',target: '陳海',name: "父子"}, {source: '陸亦可',target: '陳海',name: "屬下"}, {source: '沙瑞金',target: '陳巖石',name: "故人"}, {source: '祁同偉',target: '陳海',name: "師哥"}, {source: '祁同偉',target: '侯亮平',name: "師哥"}, {source: '侯亮平',target: '陳海',name: "同學，生死朋友"}, {source: '高育良',target: '吳惠芬',name: "夫妻"}, {source: '陳海',target: '趙東來',name: "朋友"}, {source: '高小琴',target: '高小鳳',name: "雙胞胎",symbolSize: '1'}, {source: '趙東來',target: '陸亦可',name: "愛慕"}, {source: '祁同偉',target: '程度',name: "領導"}, {source: '高育良',target: '高小鳳',name: "情人"}, {source: '趙瑞龍',target: '祁同偉',name: "勾結",symbolSize: '1',}, {source: '李達康',target: '趙東來',name: "領導"}, {source: '趙瑞龍',target: '程度',name: "領導"}, {source: '沙瑞金',target: '李達康',name: "領導"}, {source: '沙瑞金',target: '高育良',name: "領導"}, {source: '祁同偉',target: '梁璐',name: "夫妻"}, {source: '吳惠芬',target: '梁璐',name: "朋友"}, {source: '李達康',target: '歐陽菁',name: "夫妻"}, {source: '趙瑞龍',target: '劉新建',name: "洗錢工具"}, {source: '趙瑞龍',target: '高小琴',name: "勾結，腐化",symbolSize: '1'}, {source: '趙瑞龍',target: '高小鳳',name: "腐化"}, {source: '吳心怡',target: '陸亦可',name: "母女"}, {source: '吳心怡',target: '吳惠芬',name: "姐妹"}, {source: '蔡成功',target: '侯亮平',name: "發小"}, {source: '蔡成功',target: '歐陽菁',name: "舉報",lineStyle: {normal: {type: 'dotted',color: '#000'}}}, {source: '歐陽菁',target: '劉新建',name: "舉報",lineStyle: {normal: {type: 'dotted',color: '#000'}}}, {source: '劉新建',target: '趙瑞龍',name: "舉報",lineStyle: {normal: {type: 'dotted',color: '#000'}}}, {source: '李達康',target: '丁義珍',name: "領導"}, {source: '高小琴',target: '丁義珍',name: "策劃出逃"}, {source: '祁同偉',target: '丁義珍',name: "勾結"}, {source: '趙瑞龍',target: '丁義珍',name: "勾結"}]}]};myChart.setOption(option);</script> </body> </html> View Code?
4、圖
5、總結
如果web需要顯示一下關系圖，echarts是個不錯的選擇。
最后望對各位有所幫助，本文原創，歡迎拍磚和推薦。 ?
Github：https://github.com/Emrys5/ECharts-Relationship-map
?演示：https://emrys5.github.io/ECharts-Relationship-map/
?
轉載于:https://www.cnblogs.com/emrys5/p/echart-relationship-map.html
總結
以上是生活随笔為你收集整理的ECharts 实现人民的名义关系图谱 代码开源的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu下载软件安装包
- 下一篇： [bootStrap]代码块出现横线滚动