想要做一个公司-人员关系图,官网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 就可以了