一、什麼是ECharts
ECharts是百度開源的純 Javascript 圖表庫，目前開源能夠與highcharts相匹敵的一個圖表庫，相信有不少國內用戶使用。javascript
官網 http://echarts.baidu.com/css
二、開始簡單配置關係圖
一、首先配置series的type爲graph。html
二、layout爲force，layout能夠選擇none、circular和forcejava
'none' 不採用任何佈局，使用節點中提供的 x， y 做爲節點的位置。jquery
'circular' 採用環形佈局。git
'force' 採用力引導佈局。github
來自官方文檔web
二、設置鼠標移動到人物處顯示人物簡介tooltipecharts
tooltip: {
formatter: function (x) {
return x.data.des;
}
}
三、設置data ide
{
name: '侯亮平',
des: '最高檢反貪局偵查到處長，漢東省人民檢察院副檢察長兼反貪局局長。<br/>通過與腐敗違法分子的鬥爭，最終將一批腐敗分子送上了審判臺，<br/>正義打敗邪惡，本身也迎來了成長。',
symbolSize: 100,
itemStyle: {
normal: {
color: 'red'
}
}
}
四、設置關係
{
source: '高育良',
target: '侯亮平',
name: '師生',
des: '侯亮平是高育良的得意門生'
}
三、完整代碼
<!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>
四、圖
五、總結
若是web須要顯示一下關係圖，echarts是個不錯的選擇。
最後望對各位有所幫助，本文原創，歡迎拍磚和推薦。
Github：https://github.com/Emrys5/ECharts-Relationship-map
演示：https://emrys5.github.io/ECharts-Relationship-map/