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 插件做任务关系图时 添加照片相关推荐
- 出图免费插件丨REVIT出图时快速创建标准平面视图样板?
出图免费插件丨REVIT出图时快速创建标准平面视图样板? REVIT在出图时,如果我们对每个楼层平面进行平面处理,就会更加繁琐.在这种情况下,我们可以设置一个楼层平面,并将该方案存储在视图样板中.其他 ...
- 做饼状图时,显示百分比的解决方案
http://fluagen.blog.51cto.com/146595/86733 在项目中做饼状图时,显示百分比的解决方案: 饼图显示百分比 在饼图中JFreeChart默认只显示选项和数值,没有 ...
- echart关系图(graph)添加波点涟漪效果
这个是直接用echarts 的官网的实例改的,可以直接放到上面去看效果. 涟漪效果需要指定坐标系.(cartesian2d --->二维直角坐标系.polar --->极坐标系.geo-- ...
- gephi mysql_【转】使用GEPHI做社会化关系图
目前,做社会化网络分析的,除了一些在学校里看到过的学术派软件之外,我所接触过得用途比较广的,一是PROCESSING(奥莱利的可视化数据就 是以这个软件作为讲课工具的),二就是09年google co ...
- echarts做企业关系图谱_Echarts绘制关系图(一)
关系图 何为关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以 ...
- 如何使用Visio做ERD(实体关系图)
最近在做实体关系图,尝试了一些工具,发现VISIO比较合适,但是没有合适的教程,在网上找了一下,发现这篇文章写的非常好,地址如下: http://barney.gonzaga.edu/~chen/bm ...
- relation-graph实现企业架构图,关系图等(天眼查,企查查等企业架构图等实现)
企业架构图,关系图等实现 业务需求 1.公司想要的效果图 2.relation-graph插件自带的dome效果图 3.实现效果图 官方文档地址 实现代码 接口返回数据格式(最最最重要点) 动态效果图 ...
- 此数据库没有有效所有者,因此无法安装数据库关系图支持对象--解决办法
摘要:微信搜索[三桥君] 一.问题 当我们想要打开"数据库关系图"时,会出现这个问题. 此数据库没有有效所有者,因此无法安装数据库关系图支持对象.若要继续,请首先使用数据库属性对话 ...
- XMind思维导图教程:如何做思维导图?
思维导图,作为一种有效的图形思维工具越来越受大众欢迎,无论是学生.老师还是上班族,思维导图可以说是必备技能.但是,很多人在接触思维导图时会显得有些焦急,不知道怎么开始去学习它,本文小编就给大家分享下怎 ...
最新文章
- 北汽蓝谷和北汽新能源
- 3.2 matlab用if语句实现选择结构
- Node入门之创建第一个HelloNode
- git 远程分支创建与推送
- [GAE教程]初识 Google App Engine
- final关键字的深入理解
- java中不用impore导入的_java import机制(不用IDE)
- 常用音频软件:Wavesufer
- 位置式PID与增量式PID区别浅析
- java 基础 泛型
- 单片机 c语言 可控硅,以单片机控制为核心的晶闸管触发装置简单设计方案
- Vue源码解读(个人见解 + 网友理解)
- .axf文件_一文看懂hex文件、bin文件、axf文件的区别
- 安卓端airplay实现IOS屏幕镜像
- android 设置打印级别
- 提前还贷怎样才划算 多还本金减少期限最划算
- 一个简单的保护视力的软件
- Java进阶学习路线图
- oracle找回删除过的数据吗,oracle数据库中找回删除且已提交的数据
- 机器学习:Linear Discriminant Analysis(过程详解+实例代码MATLAB实现
热门文章
- 阿里云 DNS 新增云上线路的智能解析功能
- IObit Uninstaller软件卸载工具 v10.4.0.11
- cmd imp导入dmp文件_导入Oracle的dmp备份的dmp文件报错“IMP-00002:无法打开c:/Documents.DMP进行读取”...
- 在Linux服务器上如何开启安全的SNMP代理
- 从bam文件的内容来学习Phred quality score /QUAL/Cigar/等常用概念
- luogu P1710 地铁涨价
- JAVAWEB学习笔记--Day3
- SPO 二,SharePoint On-Premises, Online, On Azure.
- SQL Server AlwaysOn读写分离配置
- [初学Verilog笔记]使用assign还是always