echarts交叉关系图⼀想要做⼀个公司-⼈员关系图，官⽹echarts图graph webkit dep 稍微改了⼀下，
也是有点恶⼼⾃⼰，调了⼀个数据最多的去改，如果正好有⼈需要就不⽤去改了
说明：此图没有坐标，可以设置图形的向⼼⼒，可以是圆形，中间线相互交叉，
但是拖拽不能定型
var webkitDep={
"type": "force",
"categories": [
{
"name": "公司",
"keyword": {},
"base": "HTMLElement"
},
{
"name": "主要成员",
"keyword": {},
"base": "WebGLRenderingContext"
},
{
"name": "⾃然⼈",
"keyword": {},
"base": "SVGElement"
},
{
"name": "实业公司",
"keyword": {},
"base": "CSSRule"
}
],
"nodes": [
{
"name": "河北XX设计有限公司",
"value": 1,
"category": 0
},
{
"name": "⽯家庄XX设计有限公司",
"value": 1,
"category": 0
},
{
"name": "河北XX创业发展有限公司",
"value": 1,
"category": 0
},
{
"name": "河北XX置业发展有限公司",
"value": 1,
"category": 0
},
{
"name": "⽯家庄XX传媒有限公司",
"value": 1,
"category":0
},
{
"name": "河北XX实业发展有限公司",
"value": 1,
"category": 0
},
setoption{
"name": "赵敏雅",
"value": 1,
"category": 1
},
{
"name": "范军",
"value": 3,
"category": 1
},
{
"name": "孙海",
"value": 3,
"category": 1
},
{
"name": "李博",
"value": 3,
"category": 1
},
{
"name": "主要⼈员",
"value": 3,
"category": 2
},
{
"name": "投资⼈",
"value": 3,
"category": 2
},
{
"name": "法定代表⼈",
"value": 3,
"category": 2
},
{
"name": "河北XX实业有限公司",
"value": 3,
"category": 3
}
],
"links": [
{
"source": 0,//建⽴关联关系，按从上到下的顺序，第⼏个节点            "target": 6 //按从上到下的顺序，连接到第⼏个节点
}, {
"source": 1,
"target": 6
}, {
"source": 2,
"target": 6
}, {
"source": 2,
"target": 7
}, {
"source": 3,
"target": 8
}, {
"source": 4,
"target": 7
}, {
"source": 5,
"target": 7
}, {
"source": 6,
"target": 10
}, {
"source": 7,
"target": 10
}, {
"source": 6,
"target": 11
}, {
"source": 7,
"target": 11
}, {
"source": 8,
"target": 11
}, {
"source": 12,
"target": 8
}, {
"source": 9,
"target": 11
}, {
"source": 13,
"target": 12
}, {
"source": 13,
"target": 10
}, {
"source": 13,
"target": 11
}
]
};
var mychart8 = echarts.init($("#gxt").get(0)),
option8 = {
legend: {
data: ['公司', '主要成员', '⾃然⼈', '实业公司'],
top:0,
left:(winWidth-1200)/2, //这⾥是图例组件定位使⽤的，⾃定义            itemGap:26,
textStyle:{
padding:[0,12]
},
backgroundColor:'#f5f5f5'
},
series: [{
type: 'graph',//
layout: 'force',
animation: false,
label: {
normal: {
position: 'bottom',
show:true,
rich:{
bg:{
backgroundColor: '#f5f5f5'
}
}
},
},
symbolSize:(value,params)=>{//设置图像的⼤⼩
switch (params.data.category){
case 0:return 40;break;
case 1:return 30;break;
case 2:return 20;break;
case 3:return 30;break;
case 4:return 20;break;
default:return 10;
}
},
draggable: true,
data: des.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
force: {
// initLayout: 'circular'
// repulsion: 20,
edgeLength: 150,
repulsion: 50,
gravity: 0.01
},
edges: webkitDep.links
}]
};mychart8.setOption(option8);
直接引⼊echarts.js 就可以了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。