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 ...
随机推荐
- 4052: [Cerc2013]Magical GCD
4052: [Cerc2013]Magical GCD Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 148 Solved: 70[Submit][ ...
- 20144306《网络对抗》MAL_逆向与Bof基础
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...
- Java对象序列化
Java 1.1增添了一种有趣的特性,名为“对象序列化”(Object Serialization).它面向那些实现了Serializable接口的对象,可将它们转换成一系列字节,并可在以后完全恢复回 ...
- Struts2中ActionContext及ServletActionContext介绍(转载)
1. ActionContext 在Struts2开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在Action里直接获取请求(Request)或会话(Session)的一些信息, ...
- 深入浅出数据结构C语言版（5）——链表的操作
上一次我们从什么是表一直讲到了链表该怎么实现的想法上:http://www.cnblogs.com/mm93/p/6574912.html 而这一次我们就要实现所说的承诺,即实现链表应有的操作(至于游 ...
- ASP.NET Core MVC之ViewComponents（视图组件）
前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...
- .net平台的MongoDB使用
前言 最近花了点时间玩了下MongoDB.Driver,进行封装了工具库,平常也会经常用到MongoDB,因此写一篇文章梳理知识同时把自己的成果分享给大家. 本篇会设计到Lambda表达式的解析,有兴 ...
- WPF: 本地化(Localization) 实现
本文将讨论一种较为方便的本地化方法. 由于在项目中要实现本地化,所以在网上查找相关的解决方案.通过一系列调研,发现实现本地化的方法主要有以下三种: 通过编译项目以设置 x:Uid 并使用 LocBam ...
- HTML5 之文件操作(file)
前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文 ...
- 为什么使用 Containjs 模块化管理工具效率高？
为什么使用 Containjs 模块化管理工具效率高? 要说明这个首先得说明一下,Containjs 的模块加载原理. 第一步,首先使用异步加载(ajax)在 js 目录下的 app.js 入口模块( ...