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 ...
随机推荐
- .Net程序员学用Oracle系列(21)：分组查询(GROUP BY)
1.GROUP BY 标准分组 1.1.GROUP BY 概述 1.2.WHERE 和 HAVING 的区别? 2.GROUP BY 扩展分组 2.1.ROLLUP 分组 2.2.CUBE 分组 2. ...
- js手写图片查看器（图片的缩放、旋转、拖拽）
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- Day4 数据库的建立||数据库对外查询||使用命令行来操作数据库
###数据库的创建 建立一个项目 先进行测试,测试新项目是否可以成功运行 创建一个PersonContrary包,并建立一个Person类实现BaseColumns借口,在此类中添加所有的表的列名,并 ...
- 用Angular2+Express快速搭建博客
1. 写在前面 昨天花了1天的时间把自己的博客从以前的Express换成了Angular2+Express,遂记录于此.博客Demo在这里,你也可以点击这里查看完整代码. 第一次使用Angular2, ...
- self-question
需要即刻提升的几大能力: 1.重装系统和安装各种软件 2.自学能力,多从实际案例中总结,多归纳反思 3.拓展人际关系,和别人沟通交流 4.遇到困难迎刃而上,而不是回避退缩
- JQ鼠标右键点击功能 兼容IE8
//阻止浏览器当前DIV默认右键事件 $("div").unbind("mousedown").bind("contextmenu", fu ...
- ioS开发之CoreLocation（GPS定位）
1.概述 在iOS开发中,要想加入地图和定位功能这2大功能,必须基于2个框架进行开发 (1)Map Kit :用于地图展示 (2)Core Location :用于地理定位 2个热门专业术语: LBS ...
- css gray，grayscale，css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- ThreadLocal本地线程变量的理解
一般的Web应用划分为展现层.服务层和持久层三个层次,在不同的层中编写对应的逻辑,下层通过接口向上层开放功能调用.在一般情况下,从接收请求到返回响应所经过的所有程序调用都同属于一个线程. ...
- MySQL基础入门-第一课 新建数据库(linux版本)
MySQL linux 登录MySQL sudo ),name ),phone ) ); # 或者 ),name ),phone )); 数据类型 数据类型 大小(字节) 用途 格式 INT ...