想要做一個公司-人員關系圖，官網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
},
{
"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: webkitDep.nodes.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 就可以了