echart 人物關係圖新增照片
阿新 • • 發佈：2019-01-21
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());
});