ECharts 实现人民的名义关系图谱 代码开源
1、什么是ECharts
ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。
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: ,
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: %; width: %; margin: ; padding: }
</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: ,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [, ],
edgeLabel: {
normal: {
textStyle: {
fontSize:
}
}
},
force: {
repulsion: ,
edgeLength: [, ]
},
draggable: true,
itemStyle: {
normal: {
color: '#4b565b'
}
},
lineStyle: {
normal: {
width: ,
color: '#4b565b' }
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data: [
{
name: '侯亮平',
des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
symbolSize: ,
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '李达康',
des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '祁同伟',
des: '汉东省公安厅厅长',
symbolSize:
}, {
name: '陈岩石',
des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '陆亦可',
des: '汉东省检察院反贪局一处处长',
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '高育良',
des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
symbolSize:
}, {
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: ''
}, {
source: '赵东来',
target: '陆亦可',
name: "爱慕"
}, {
source: '祁同伟',
target: '程度',
name: "领导"
}, {
source: '高育良',
target: '高小凤',
name: "情人"
}, {
source: '赵瑞龙',
target: '祁同伟',
name: "勾结",
symbolSize: '',
}, {
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: ''
}, {
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>
4、图
5、总结
如果web需要显示一下关系图，echarts是个不错的选择。
最后望对各位有所帮助，本文原创，欢迎拍砖和推荐。
Github：https://github.com/Emrys5/ECharts-Relationship-map
演示：https://emrys5.github.io/ECharts-Relationship-map/
ECharts 实现人民的名义关系图谱 代码开源的更多相关文章
- Echarts——关系图（人民的名义为例，简化）源码
参考博文:https://www.cnblogs.com/emrys5/p/echart-relationship-map.html <!DOCTYPE html> <html> ...
- 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
- Relation.js——基于pixi.js的拓展模块之人物关系图谱
出于[重构基于D3的关系图谱项目]的目的,在看完pixi.js之后,并且网上又没有现成的基于webgl的关系图谱js库,于是,本人决定自己写一个. 因为平常要工作的原因,进度可能有点慢,但是githu ...
- [置顶]
【机器学习PAI实践五】机器学习眼中的《人民的名义》
一.背景 最近热播的反腐神剧"人民的名义"掀起来一波社会舆论的高潮,这部电视剧之所能得到广泛的关注,除了老戏骨们精湛的演技,整部剧出色的剧本也起到了关键的作用.笔者在平日追剧之余, ...
- 一文教你用 Neo4j 快速构建明星关系图谱
更多有趣项目及代码见于:DesertsX/gulius-projects 前言 本文将带你用 neo4j 快速实现一个明星关系图谱,因为拖延的缘故,正好赶上又一年的4月1日,于是将文中的几个例子顺势改 ...
- vue使用GraphVis开发无限拓展的关系图谱
1.去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http://www.graphvis.cn/) visgraph.min.j ...
- UML类图五种关系与代码的对应关系
转: UML类图中的五种关系的耦合强弱比较:依赖<关联<聚合<组合<继承 一.依赖关系: (一)说明 虚线+箭头 可描述为:Uses a 依赖是类的五种关系中耦合最小的一种关系 ...
- Python来袭，教你用Neo4j构建“复联4”人物关系图谱！
来源商业新知网,原标题:Python来袭,教你用Neo4j构建“复联4”人物关系图谱!没有剧透! 复仇者联盟 之绝对不剧透 漫威英雄们为了不让自己剧透也是使出了浑身解数.在洛杉矶全球首映礼上记者费尽心 ...
- Flask数据库常见关系模板代码
常见关系模板代码 以下罗列了使用关系型数据库中常见关系定义模板代码 一对多 示例场景: 用户与其发布的帖子(用户表与帖子表) 角色与所属于该角色的用户(角色表与多用户表) 示例代码 class Rol ...
随机推荐
- CRUD操作（20161017）
上午: (7)范围查询 select * from car where price>40 and price<60 select * from car where price betwee ...
- 解决WebStorm无法连接到Chrome
问题: 点击 中的chrome时,出现了错误,如下: 解决办法: 找到 File>setting>Web Browser 修改为 C:\Program Files (x86)\Google ...
- 浅谈python 手机crash和app crash循环执行问题
----------------引子---------------- app自动化测试人员经常遇见的问题,第一:手机抛的异常导致脚本循环停止!!!!!!!!第二:app抛的异常导致脚本循环停止!!!! ...
- koa中间件系统原理及koa+orm2实践。
koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...
- React-Native 开发（二） 在react-native 中 运用 redux
前提: 一个小web前端,完全不会android 跟iOS 的开发,首次接触,有很多不懂的问题.请见谅. 环境: win7 上一篇 : React-Native 开发(一) Android环境部署,H ...
- C++—动态内存管理之深入探究new和delete
C++中程序存储空间除栈空间和静态区外,每个程序还拥有一个内存池,这部分内存被称为自由空间(free store)或堆(heap).程序用堆来存储动态分配的对象,即,那些程序运行时分配的对象.动态对象 ...
- java之泛型解说
1.集合中只能装入引用数据类型,不能装入基本数据类型.如,装入int类型的数值123会自动装箱. 2.开发人员装入集合的数据类型不确定,所以它被设计成可以装入所有的Object. 3.新的问题产生,装 ...
- 山东省济南市历城第二中学——洛谷图论入门题--基本题必做 图的遍历—3.骑马修栅栏(fence)
由于我这个破题提交了十四五遍,所以我决定写篇博客来记录一下. 这个题的题目描述是这样的 首先一看这个题我瞬间就想到了一笔画问题(欧拉回路). 对于能够一笔画的图,我们有以下两个定理. 定理1:存在欧拉 ...
- xml学习_上篇
xml简介: XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. xml小示例: /************************ ...
- 老李推荐： 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例 4
第七步:保存新增加日记 代码3-2-7 增加日记-保存日记 #Step7: Save the note by touch on the "save" menu entry by c ...