人物关系图谱: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>

效果：

人物关系图谱:ECharts 实现相关推荐

PersonGraphDataSet近十万的开放人物关系图谱项目
PersonGraphDataSet PersonGraphDataSet, nearly 10 thousand person2person relationship facts that buil ...
Python + Neo4j（安装）可视化分析漫威十年人物关系图谱
目录 1 数据爬取 1.1 漫威人物关系图谱网站 1.2 爬取人物关系数据 2 Neo4j的安装及服务启动 2.1 Neo4j下载安装 2.2 开启Neo4j服务 3 数据准备 3.1 加入列名 3. ...
BERT辅助金融领域人物关系图谱构建
摘要现有的人员简历信息抽取方法无法针对金融公告中非结构化人员简历进行人员属性以及事件的抽取,无法发现金融公告中跨文档的人员之间关系.针对以上问题,将非结构化的人员简历抽取成结构化的人员信息模板,提出 ...
在图数据库Neo4j中创建红楼梦人物关系图谱
在图数据库Neo4j中创建红楼梦人物关系图谱 1.加载csv数据文件 load csv from 'file:///triples.csv' as linecreate (:role {name:li ...
[转载]红楼梦四大家族人物关系图谱(12系列图表)_RWERWERWE_96921_新浪博客
原文地址:红楼梦四大家族人物关系图谱(12系列图表) 作者: 静心聆听62 红楼梦主要人物关系 01红楼梦四大家族人物关系图谱 02红楼梦人物关系简图 03红楼梦人物关系详图 04红楼梦四大家族奴隶图 ...
知识图谱初探（二）三体人物关系图谱构建
<三体>电视剧正在热播,忽然觉得如果用知识图谱来构建下其中的人物关系,想必应该有趣! 那我们就开始吧! 首先列一下其中的相关人物叶文洁叶文雪沙瑞山杨冬杨卫宁白沐霖邵琳叶哲泰 ...
Python来袭，教你用Neo4j构建“复联4”人物关系图谱！没有剧透！【文末赠书】...
讲技术之前先引个好玩的热点话题,带你与时代接轨~ 漫威系列电影<复仇者联盟4>上映你去看了吗? 小编就盼着周末去好好享受谁剧透,跟谁急! 复仇者联盟之绝对不剧透漫威英雄们为了不让 ...
D3.js实现人物关系图谱有移动、拖拽、放大功能
原文链接:https://www.jianshu.com/p/d768505cab78 在此基础上加了点东西实现了关系图的移动.拖拽.放大功能.以及数据的分类等等.代码稍显繁琐,另外案例中的d3.j ...
实现人物关系图谱，人物影响力图
前言最近在做一个项目,其中有一个页面是要做一个类似于个人分享关系图的效果.于是找了网上很多demo,借鉴的一些思路和方法,打算自己动手撸一个出来. 效果 demo Github项目demo 整体思路 ...
知识图谱可视化——《间客》人物关系
知识图谱可视化--<间客>人物关系借鉴echarts的<间客>人物关系案例完成了知识图谱可视化. 存在疑问是: 1.如何将图谱可视化体现业务价值? 2.如何结合QA问答交互, ...

人物关系图谱:ECharts 实现

1、什么是ECharts

2、开始简单配置关系图

3、完整代码

人物关系图谱:ECharts 实现相关推荐

最新文章

热门文章