博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts交叉关系图一
阅读量:5363 次
发布时间:2019-06-15

本文共 5029 字,大约阅读时间需要 16 分钟。

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

转载于:https://www.cnblogs.com/lcyxfei/p/10843506.html

你可能感兴趣的文章
c#接口
查看>>
MyEclipse部署Jboss出现java.lang.OutOfMemoryError: PermGen space
查看>>
ZOJ 1133
查看>>
HIVE和HADOOP的一些东西
查看>>
alibaba / zeus 安装 图解
查看>>
Planned Delivery Time as Work Days (SCN discussion)
查看>>
Ubuntu:让桌面显示回收站
查看>>
Android上传头像代码,相机,相册,裁剪
查看>>
git 安装体验
查看>>
Oracle 给已创建的表增加自增长列
查看>>
《DSP using MATLAB》Problem 2.17
查看>>
if 循环
查看>>
uva 111 History Grading(lcs)
查看>>
Python学习week2-python介绍与pyenv安装
查看>>
php判断网页是否gzip压缩
查看>>
一个有意思的js实例,你会吗??[原创]
查看>>
sql server中bit字段实现取反操作
查看>>
Part3_lesson2---ARM指令分类学习
查看>>
jQuery拖拽原理实例
查看>>
JavaScript 技巧与高级特性
查看>>