力导向图
之前要求改写个树状图的展示方式, 想改成关系图 , 但是去官网看例子没有那么好的来符合, 在网上找资料也不是很对胃口, 花了很多时间研究了一下 ,写下这篇给自己以后在用到的时候看吧
先是一个小例子,在网上找的,是用它改写的
这是我经过小修改之后的代码:
myChart.showLoading();
var webkitDep = {
"type": "force",
"categories": [//关系网类别,可以写多组
{
"name": "网格关系",//关系网名称
"keyword": {},
"base": "网格关系"
}
],
"nodes": [//展示的节点
{
"name": "父节点",//节点名称
"value": 3,
"category": 0//与关系网类别索引对应,此处只有一个关系网所以这里写0
},
{
"name": "二级父节点1",
"value": 8,
"category": 0
},
{
"name": "二级父节点2",
"value": 10,
"category": 0
},
{
"name": "子节点1",
"value": 10,
"category": 0
},
{
"name": "子节点2",
"value": 110,
"category": 0
},
{
"name": "子节点3",
"value": 100,
"category": 0
},
{
"name": "子节点4",
"value": 1000,
"category": 0
}
],
"links": [//节点之间连接
{
"source": 0,//起始节点,0表示第一个节点
"target": 1 //目标节点,1表示与索引为1的节点进行连接
},
{
"source": 0,
"target": 2
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 4
},
{
"source": 2,
"target": 5
},
{
"source": 2,
"target": 6
}
]
};
myChart.hideLoading();
option = {
legend: {
data: ['网格关系']//此处的数据必须和关系网类别中name相对应
},
series: [{
type: 'graph',
layout: 'force',
animation: false,
label: {
normal: {
show:true,
position: 'right'
}
},
draggable: true,
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
force: {
edgeLength: 105,//连线的长度
repulsion: 100 //子节点之间的间距
},
edges: webkitDep.links
}]
};
myChart.setOption(option);
这里是一个在线编辑echarts的网址
http://echarts.baidu.com/gallery/editor.html?c=doc-example/getting-started
好了 现在就可以开始弄自己做出来的图了,下面是效果图
这里有两个地方 一个是颜色设置
这里设置的时候 ,在nodes节点里push一个属性itemStyle:{normal: {color: ‘#00A600’}} 就行了, 直接写color是不行的, 会被认为参数
links 是控制节点的链接, 在前台可以灵活使用 , 来应对不同的需求