Echarts——关系图（人民的名义为例，简化）源码
参考博文：https://www.cnblogs.com/emrys5/p/echart-relationship-map.html
<!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
}
],
links: [
{
source: '李达康',
target: '侯亮平',
name: '师生',
des: '侯亮平是高育良的得意门生' },
{
source:'周博',
target:'李达康',
name:'无',
symbolSize: '5',
lineStyle: {
normal: {
type: 'dotted',
color: '#000'
}
}
}]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts——关系图（人民的名义为例，简化）源码的更多相关文章
- hadoop下生成echarts关系图
数据 O700 O2833 O700 O331 O700 O3425 O700 O350 O700 O3516 O700 O3826 读取文件类 public class FileReadFromHd ...
- Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
- Echarts 关系图 添加点击事件
/*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...
- 多图详解Go的sync.Pool源码
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的go的源码时14.4 Pool介绍 总所周知Go 是一个自动垃圾回收的编程语言 ...
- echarts关系图圆心颜色渐变
let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 动画更新变化时间 animationEasin ...
- echarts 关系图graph force布局 拖动节点并固定不返回原点
myChart.on('mouseup',function(params){var option=myChart.getOption();option.series[0].nodes[params.d ...
- 北京地铁换乘算法(二维坐标系，图的深度搜索)开源下载Android源码、性能最优解
距离2012年11月2日下午2:05:31 已经过去158751270这么多秒了,不小心暴露了我的当前时间. java代码贴出来. private static long gettimelong() ...
- arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- [置顶] JDK-CountDownLatch-实例、源码和模拟实现
Conception A synchronization aid that allows one or more threads to wait until a set of operations b ...
随机推荐
- JDK1.8新特性(一) ----Lambda表达式、Stream API、函数式接口、方法引用
jdk1.8新特性知识点: Lambda表达式 Stream API 函数式接口 方法引用和构造器调用 接口中的默认方法和静态方法 新时间日期API default Lambda表达式 L ...
- Jmeter测试出现端口占用情况
Jmeter测试会出现端口占用情况 这边在这里做个记录,每次都要百度查询,刚好需要整理下,我就也记录一份到这里吧.感谢大佬的文章. 参考文章:windows下Jmeter压测端口占用问题 因Windo ...
- Vue中遍历数组的新方法
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...
- stm32 RS485 SP3485
RS485 是半双工通信(2 线制) SP3485芯片的DE与RE短接在一起连接在STM32F1芯片的PG3上,通过PG3管脚就可以控制 SP3485的收发,当PG3=0时,为接收模式,当PG3=1时 ...
- Echarts如何添加鼠标点击事件？防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- springmvc模式下的上传和下载
接触了springmvc模式后,对上一次的上传与下载进行优化, 上次请看这里. 此处上传的功能依旧是采用表格上传.文件格式依旧是 <form action="${pageContext ...
- LightOJ - 1151 Snakes and Ladders
LightOJ - 1151 思路: 将期望dp[x]看成自变量,那么递推式就可以看成方程组,用高斯消元求方程组的解就能求解出期望值 高斯消元求解的过程也是期望逆推的过程,注意边界情况的常数项,是6/ ...
- Euler's Sum of Powers Conjecture
转帖:Euler's Sum of Powers Conjecture 存不存在四个大于1的整数的五次幂恰好是另一个整数的五次幂? 暴搜:O(n^4) 用dictionary:O(n^3) impor ...
- 2018/7/31-zznu-oj- 2128: 素数检测 -【费马小定理裸应用】
2128: 素数检测 时间限制: 1 Sec 内存限制: 128 MB提交: 84 解决: 32[提交] [状态] [讨论版] [命题人:admin] 题目描述 在算法竞赛中你会遇到各种各样的有关 ...
- [WebMethod]参数介绍
一.WebService的调试 net 2.0新建webservice为了安全考虑,默认关闭了Post和Get方法 .让其打开,可在Web.config文件的<system.web>下增加 ...