echart 人物关系图添加照片
http://echarts.baidu.com/echarts2/doc/example/force.html
option = {
title : {
text: '人物关系:乔布斯',
subtext: '数据来自人立方',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
feature : {
restore : {show: true},
magicType: {show: true, type: ['force', 'chord']},
saveAsImage : {show: true}
}
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
name : "人物关系",
ribbonType: false,
categories : [
{
name: '人物'
},
{
name: '家人',
symbol: 'diamond'
},
{
name:'朋友'
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
//r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
gravity: 1.1,
scaling: 1.2,
draggable: false,
linkSymbol: 'arrow',
steps: 10,
coolDown: 0.9,
//preventOverlap: true,
nodes:[
{
category:0, name: '乔布斯', value : 10,
symbol: 'image://http://www.damndigital.com/wp-content/uploads/2010/12/steve-jobs.jpg',
symbolSize: [60, 35],
draggable: true,
itemStyle: {
normal: {
label: {
position: 'right',
textStyle: {
color: 'black'
}
}
}
}
},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
],
links : [
{source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿', itemStyle: {
normal: {
width: 1.5,
color: 'red'
}
}},
{source : '乔布斯', target : '丽萨-乔布斯', weight : 1, name: '父亲', itemStyle: {
normal: { color: 'red' }
}},
{source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
{source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
{source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
{source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
{source : '奥巴马', target : '乔布斯', weight : 1},
{source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
{source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
{source : '蒂姆-库克', target : '乔布斯', weight : 1},
{source : '龙-韦恩', target : '乔布斯', weight : 1},
{source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
{source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
{source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
{source : '比尔-盖茨', target : '奥巴马', weight : 6},
{source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
{source : '蒂姆-库克', target : '奥巴马', weight : 1}
]
}
]
};
var ecConfig = require('echarts/config');
function focus(param) {
var data = param.data;
var links = option.series[0].links;
var nodes = option.series[0].nodes;
if (
data.source != null
&& data.target != null
) { //点击的是边
var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
} else { // 点击的是点
console.log("选中了" + data.name + '(' + data.value + ')');
}
}
myChart.on(ecConfig.EVENT.CLICK, focus)
myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
console.log(myChart.chart.force.getPosition());
});
echart 人物关系图添加照片相关推荐
- echart图表 和弦关系图 悲惨世界人物关系图的使用及配置项 修改旋转角度 顺时针旋转
使用echart图表时,偶尔会遇到使用和弦关系图的问题,这里举例和弦关系图的配置 <template><div><div>和弦关系图(echart官网也称:悲惨世界 ...
- 网页开发 与数据联动的图_零基础学习数据可视化pyecharts人物关系图开发
Pyecharts人物关系图开发 1. Pyecharts版本说明 Pyecharts的版本最新版本为1.7.0版本,此版本跟0.5版本的使用方法不一样了.很多参数方法配置不一样了.Import的内容 ...
- 红楼梦人物关系图,一代大师成绝响,下回分解待何人,kindle读书摘要
人物关系图: https://www.cnblogs.com/images/cnblogs_com/elesos/1120632/o_2033091006.jpg 红楼梦 (古典名著普及文库) (曹雪 ...
- 有哪些思维导图或其他软件适合画人物关系图?
先说思维导图软件(以MindMaster为例) 诚然,大部分思维导图软件都是有一个中心主题,然后向两边发散.但是也有小部分思维导图软件支持"浮动主题",比如MindMaster.所 ...
- 便捷绘制人物关系图的软件分享
看阿加莎.东野圭吾的推理小说,或者<红楼梦><冰与火之歌>这类的史诗巨作,经常会被错综复杂的人物关系弄昏头脑. 面对这些情况,怎么办? 今天分享两款压箱底的工具,支持高效绘制人 ...
- python代码电影人物关系_Python基于network模块制作电影人物关系图
Python基于network模块制作电影人物关系图,节点,值为,模块,关系,算法 Python基于network模块制作电影人物关系图 易采站长站,站长之家为您整理了Python基于network模 ...
- Tableau制作人物关系图
人物关系图可以清晰表示人物之间的关联关系,通过这种关系的呈现给人直观印象,能够达到总览人物故事的全貌,一起看下这个人物关系图是怎样制作的吧. 在绘制人物关系图之前我们需要设计人物关系图,看似杂乱无章的 ...
- 关于echarts人物关系图,节点展现为图片
echarts示例中人物关系图中节点是原点或其他形状,但人物关系图中节点呈现为人物图像更为合适. 有些情况下,使用symbol: require('@/assets-')可以使用本地资源中的图片进行展 ...
- 射雕英雄传人物关系python_《射雕英雄传》人物关系图
读完一本书,非虚构类的,要画思维导图,串联脉络,找出结构. 而虚构类的如小说,最好就是画出人物关系图,在人与人之间的爱恨情仇中,串联情节,还原整个故事. <射雕英雄传>的人物关系图,在网上 ...
最新文章
- unity UV 动画
- (二)HTTP初相识--了解HTTP协议
- axure8.0导出页面打不开问题_excel怎么转pdf?excel打不开?转换成PDF就行了
- python集合常用方法_Python中集合类型(set)学习小结
- C语言的getopt
- “3D字体”素材|让你的设计脱颖而出,看起来与众不同
- 跳绳减肥每天多少下有效?正确跳绳姿势是什么?
- arcgis已试图对空几何执行该操作_ArcGIS中坐标转换和投影变换
- 既然Java反射可以访问和修改私有成员变量,那封装成private还有什么意义
- 六石管理学:流程是为工作服务的
- 第十三届蓝桥杯c++b组2022年国赛决赛题解
- 《ISO20000-12011 认证合格判定基础》(证书样例子+认证文档+录音下载)
- 项目管理--maven浅析《四》之私服(Nexus)
- 大华海康NVR录像JAVA下载及WEB播放
- 网易云信 UI 开发
- 典型的多层神经网络模型,神经网络多传感器融合
- vue+MathJax 显示数学公式
- 教育部大学计算机课程改革项目规划教材答案,大学计算机实验指导及习题训练(教育部大学计算机课程改革项目规划教材)...
- 链表反转(C++版)
- centos7操作系统开机提示error:file “/boot/grub/i386-pc/normal.mod“ not found