echars实现力导向图示
echars可以展现出节点之间的关系,例如交易数据与账号的关系。
实现效果:
实现思路:
1.先获取节点数据相关的数据
2.再将数组数据设置到node节点和Links节点上
3.设置节点的关系,设置node节点和links节点的关联关系
4.设置力导向图的样式
实现代码:
// 基于准备好的dom,初始化echarts实例
var chart = echarts.init(document.getElementById('chart'));
//准备好数据
//以下为节点数据,每一个{}里面为一个节点,category(该节点类别),name(关系连接的关键字,可以理解为键值中的键,可为数字)
//value(节点的值,可以设置节点半径与该值的关系),label(该字段是我用来显示该节点标签的,可以改名),大家也可以自己设置其他字段
var graph = {};//数据
graph.nodes = [
{category:0,name: 13978, value :5,label: '杨疙'},
{category:1, name: 729,value : 2,label: '姜杰'},
{category:1, name: 2504,value : 3,label: '9224100103388'},
{category:1, name: 14238,value : 3,label: '何求'},
{category:1, name: 1306,value : 7,label: '周次'},
// {category:2, name: 6,value : 5,label: '史蒂夫-沃兹尼艾克'},
// {category:2, name: 7,value : 8,label: '奥巴马'},
// {category:2, name: 8,value : 9,label: '比尔-盖茨'},
// {category:2, name: 9,value : 4,label: '乔纳森-艾夫'},
// {category:2, name: 10,value : 4,label: '蒂姆-库克'},
// {category:2, name: 11,value : 1,label: '龙-韦恩'},
];
//以下为连线关系数据,每一个{}里面为一个关系,source(起点,对应上面的name),target(终点,对应上面的name)
//value(起点到终点的距离,值越大,权重越大,距离越短)
graph.links = [
{source : "13978", target : "2504", value : 8, label: '8'},
{source : "14238", target : "2504", value : 5, label: '6'},
{source : "13978", target : "1306", value : 8, label: '2'},
{source : "14238", target : "729", value : 5, label: '2'},
{source : "14238", target : "1306", value : 6, label: '2'},
{source : "13978", target : "729", value : 8, label: '2'},
// {source : 8, target : 1, value : 6, label: '竞争对手'},
// {source : 9, target : 1, value : 1, label: '爱将'},
// {source : 10, target : 1, value : 1, label: '不详'},
// {source : 11, target : 1, value : 1, label: '不详'},
// {source : 4, target : 3, value : 1, label: '不详'},
// {source : 7, target : 3, value : 1, label: '不详'},
// {source : 7, target : 4, value : 1, label: '不详'},
// {source : 7, target : 5, value : 1, label: '不详'},
// {source : 7, target : 6, value : 1, label: '不详'},
// {source : 8, target : 7, value : 6, label: '不详'},
// {source : 8, target : 4, value : 1, label: '不详'},
// {source : 10, target : 7, value : 1, label: '不详'}
];
//categories为node节点分类,categoriesshort为显示图例,后者比前者短,可以使得图例中没有主干人物
graph.categories = [{name:'主干人物'},{name:'家人'},{name:'朋友'} ];
graph.categoriesshort = [{name:'家人'},{name:'朋友'} ];
// 设置关系图节点标记的大小
graph.nodes.forEach(function (node) {
node.symbolSize = node.value*6;
});
var option = {
title: {
text: '交易关系图',//标题
subtext: '交易关系',//标题副标题
top: 'top',//相对在y轴上的位置
left: 'center'//相对在x轴上的位置
},
tooltip : {//提示框,鼠标悬浮交互时的信息提示
trigger: 'item',//数据触发类型
formatter: function(params){//触发之后返回的参数,这个函数是关键
console.log(params);
if (params.data.category !=undefined) {//如果触发节点
return '人物:'+params.data.label;//返回标签
}else {//如果触发边
return '交易次数:'+params.data.label;
}
},
},
//工具箱,每个图表最多仅有一个工具箱
toolbox: {
show : true,
feature : {//启用功能
//dataView数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
restore : {show: true},//restore,还原,复位原始图表
saveAsImage : {show: true}//saveAsImage,保存图片
}
},
//全局颜色,图例、节点、边的颜色都是从这里取,按照之前划分的种类依序选取
color:['rgb(194,53,49)','rgb(178,144,137)','rgb(97,160,168)'],
//图例,每个图表最多仅有一个图例
// legend: [{
// x: 'left',//图例位置
// //图例的名称,这里返回短名称,即不包含第一个,当然你也可以包含第一个,这样就可以在图例中选择主干人物
// data: graph.categoriesshort.map(function (a) {
// return a.name;
// })
// }],
//sereis的数据: 用于设置图表数据之用
series : [
{
name: '人际关系网络图',//系列名称
type: 'graph',//图表类型
layout: 'force',//echarts3的变化,force是力向图,circular是和弦图
draggable: true,//指示节点是否可以拖动
data: graph.nodes,//节点数据
links: graph.links,//边、联系数据
categories: graph.categories,//节点种类
focusNodeAdjacency:true,//当鼠标移动到节点上,突出显示节点以及节点的边和邻接节点
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
label: {//图形上的文本标签,可用于说明图形的一些数据信息
normal: {
show : true,//显示
position: 'right',//相对于节点标签的位置
//回调函数,你期望节点标签上显示什么
formatter: function(params){
return params.data.label;
},
}
},
//节点的style
itemStyle:{
normal:{
opacity:0.9,//设置透明度为0.8,为0时不绘制
},
},
// 关系边的公用线条样式
lineStyle: {
normal: {
show : true,
color: 'target',//决定边的颜色是与起点相同还是与终点相同
curveness: 0.3//边的曲度,支持从 0 到 1 的值,值越大曲度越大。
}
},
force: {
edgeLength: [100,200],//线的长度,这个距离也会受 repulsion,支持设置成数组表达边长的范围
repulsion: 100//节点之间的斥力因子。值越大则斥力越大
}
}
]
};
chart.setOption(option);