关系图是 ECharts 提供的图表类型之一，用于展示节点（实体）之间的关系。创建一个关系图涉及到定义节点（nodes）和边（links）的数据，以及配置图表的样式和行为。
echarts针对关系图提供了三种布局；
layout: "none" | "circular" | "force"
'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置;
'circular' 采用环形布局;
'force' 采用力引导布局；
1.关系图options中series主要配置
series: [{name: 'Les Miserables',type: 'graph', // 指定关系图layout: 'none', // 布局data: [], // 关系图的节点数据列表links: [], // 节点间的关系数据categories: [], // 节点分类的类目roam: true, // 是否开启鼠标缩放和平移漫游
focusNodeAdjacency: true, // 聚焦关系图中的邻接点和边的图形。
}]
2.节点数据
{"id": "1","name": "A类", // 节点名称"symbolSize": 20, // 节点大小"x": -218.08344, // 节点的初始 x 值。"y": 350.8853, // 节点的初始 y 值。"value": 4, // 数据项值。"category": 1 // 节点所在类目categories的 index。
"itemStyle"：{ // 该节点的样式,可不写,默认随机给颜色
"color": "#000"
}
},
3.节点的边
{"source": "0", //边的源节点名称的字符串(节点的name)，也支持使用数字表示源节点的索引(该节点所属类目categories的index)。"target": "1" //边的目标节点名称的字符串，也支持使用数字表示源节点的索引。}
4.节点分类的类目
{"name": "A类", // 类目名称，用于和 legend 对应以及格式化tooltip 的内容。
"itemStyle"：{ // 类目的样式,可不写,默认随机给颜色
"color": "#000"
}
}
force布局效果图如下：
force布局Options：
Option = {animationDuration: 3000,animationEasingUpdate: 'quinticInOut',tooltip: {},legend: [],series: [{name: 'CN113528510A',type: 'graph',layout: 'force', // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置;'circular' 采用环形布局; 'force' 采用力引导布局 force: {repulsion: 280, // 节点间的斥力，值越大斥力越大 },data: [],links: [],categories: [],focusNodeAdjacency: true, // 聚焦关系图中的邻接点和边的图形。roam: true, // 是否开启鼠标缩放和平移漫游 label: {show: true,position: 'right',formatter: '{b}'},labelLayout: {hideOverlap: true, //是否隐藏重叠的标签 },scaleLimit: {min: 0.4, // 最小的缩放值max: 2, // 最大的缩放值 },lineStyle: {color: 'source',curveness: 0.3, // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。 },animationDelay: 1000,animationDuration: 1500,animationEasingUpdate: 'quinticInOut',}] }
force布局数据：
{"nodes": [{"name": "三国演义","symbolSize": 150,"draggable": "true","value": 27}, {"name": "刘备2239","value": 15,"symbolSize": 80,"category": "刘备2239","draggable": "true"}, {"name": "使君70","symbolSize": 3,"category": "刘备2239","draggable": "true","value": 1}, {"name": "玄德1770","symbolSize": 60,"category": "刘备2239","draggable": "true","value": 1}, {"name": "皇叔112","symbolSize": 15,"category": "刘备2239","draggable": "true","value": 1}, {"name": "诸葛亮1892","value": 60,"symbolSize": 60,"category": "诸葛亮1892","draggable": "true"}, {"name": "孔明1643","symbolSize": 50,"category": "诸葛亮1892","draggable": "true","value": 1}, {"name": "卧龙40","symbolSize": 3,"category": "诸葛亮1892","draggable": "true","value": 1}, {"name": "曹操979","value": 5,"symbolSize": 40,"category": "曹操979","draggable": "true"}, {"name": "孟德29","symbolSize": 3,"category": "曹操979","draggable": "true","value": 1}, {"name": "曹公44","symbolSize": 7,"category": "曹操979","draggable": "true","value": 1}, {"name": "关羽948","value": 40,"symbolSize": 18,"category": "关羽948","draggable": "true"}, {"name": "云长431","symbolSize": 20,"category": "关羽948","draggable": "true","value": 1}, {"name": "关公508","symbolSize": 25,"category": "关羽948","draggable": "true","value": 1}, {"name": "张飞408","value": 8,"symbolSize": 25,"category": "张飞408","draggable": "true"}, {"name": "翼德55","symbolSize": 5,"category": "张飞408","draggable": "true","value": 1}, {"name": "赵云393","value": 5,"symbolSize": 30,"category": "赵云393","draggable": "true"}, {"name": "子龙95","symbolSize": 7,"category": "赵云393","draggable": "true","value": 1}, {"name": "孙权390","value": 30,"symbolSize": 30,"category": "孙权390","draggable": "true"}, {"name": "仲谋10","symbolSize": 3,"category": "孙权390","draggable": "true","value": 1}, {"name": "吴侯72","symbolSize": 10,"category": "孙权390","draggable": "true","value": 1}, {"name": "吕布384","value": 20,"symbolSize": 30,"category": "吕布384","draggable": "true"}, {"name": "奉先15","symbolSize": 3,"category": "吕布384","draggable": "true","value": 1}, {"name": "温侯12","symbolSize": 3,"category": "吕布384","draggable": "true","value": 1}, {"name": "周瑜328","value": 6,"symbolSize": 18,"category": "周瑜328","draggable": "true"}, {"name": "公瑾60","symbolSize": 5,"category": "周瑜328","draggable": "true","value": 1}, {"name": "周郎35","symbolSize": 3,"category": "周瑜328","draggable": "true","value": 1}, {"name": "魏延327","value": 6,"symbolSize": 18,"category": "魏延327","draggable": "true"}, {"name": "文长12","symbolSize": 3,"category": "魏延327","draggable": "true","value": 1}],"links": [{"source": "三国演义","target": "刘备2239"}, {"source": "刘备2239","target": "使君70"}, {"source": "刘备2239","target": "玄德1770"}, {"source": "刘备2239","target": "皇叔112"}, {"source": "三国演义","target": "诸葛亮1892"}, {"source": "诸葛亮1892","target": "孔明1643"}, {"source": "诸葛亮1892","target": "卧龙40"}, {"source": "三国演义","target": "曹操979"}, {"source": "曹操979","target": "孟德29"}, {"source": "曹操979","target": "曹公44"}, {"source": "三国演义","target": "关羽948"}, {"source": "关羽948","target": "云长431"}, {"source": "关羽948","target": "关公508"}, {"source": "三国演义","target": "张飞408"}, {"source": "张飞408","target": "翼德55"}, {"source": "三国演义","target": "赵云393"}, {"source": "赵云393","target": "子龙95"}, {"source": "三国演义","target": "孙权390"}, {"source": "孙权390","target": "仲谋10"}, {"source": "孙权390","target": "吴侯72"}, {"source": "三国演义","target": "吕布384"}, {"source": "吕布384","target": "奉先15"}, {"source": "吕布384","target": "温侯12"}, {"source": "三国演义","target": "周瑜328"}, {"source": "周瑜328","target": "公瑾60"}, {"source": "周瑜328","target": "周郎35"}, {"source": "三国演义","target": "魏延327"}, {"source": "魏延327","target": "文长12"}],"categories": [{"name": "刘备2239"}, {"name": "诸葛亮1892"}, {"name": "曹操979"}, {"name": "关羽948"}, {"name": "张飞408"}, {"name": "赵云393"}, {"name": "孙权390"}, {"name": "吕布384"}, {"name": "周瑜328"}, {"name": "魏延327"}] }
none布局效果图如下，每个节点位置可以自定义。
none布局Options：
option = {tooltip: {},legend: [{data: graph.categories.map(function (a) {return a.name;})}],series: [{name: 'Les Miserables',type: 'graph',layout: 'none',data: graph.nodes,links: graph.links,categories: graph.categories,roam: true,label: {show: true,position: 'right',formatter: '{b}'},labelLayout: {hideOverlap: true},scaleLimit: {min: 0.4,max: 2},lineStyle: {color: 'source',curveness: 0.3}}]}
none布局的数据：
{"nodes": [{"id": "0","name": "432523533628510A","symbolSize": 30,"x": -266.82776,"y": 299.6904,"value": 28.685715,"category": 0},{"id": "1","name": "A类","symbolSize": 20,"x": -218.08344,"y": 350.8853,"value": 4,"category": 1},{"id": "2","name": "B类","symbolSize": 20,"x": -212.76357,"y": 245.29176,"value": 9.485714,"category": 2},{"id": "3","name": "C类","symbolSize": 20,"x": -282.82404,"y": 235.26283,"value": 9.485714,"category": 3},{"id": "4","name": "D类","symbolSize": 20,"x": -349.30386,"y": 310.06424,"value": 4,"category": 4},{"id": "5","name": "E类","symbolSize": 20,"x": -317.26337,"y": 360.03506,"value": 4,"category": 5},{"id": "6","name": "热度1","symbolSize": 9,"x": -142.6012,"y": 355.16974,"value": 50,"category": 1},{"id": "7","name": "热度2","symbolSize": 9,"x": -162.69568,"y": 375.09113,"value": 50,"category": 1},{"id": "8","name": "热度3","symbolSize": 9,"x": -220.384,"y": 397.17325,"value": 50,"category": 1},{"id": "9","name": "热度4","symbolSize": 9,"x": -180.39832,"y": 411.16772,"value": 50,"category": 1},{"id": "10","name": "热度5","symbolSize": 9,"x": -220.34107,"y": 434.56128,"value": 50,"category": 1},{"id": "11","name": "热度6","symbolSize": 9,"x": -77.93029,"y": 370.8120565,"value": 50,"category": 1},{"id": "12","name": "热度7","symbolSize": 9,"x": -139.77908,"y": 434.69139,"value": 50,"category": 1},{"id": "13","name": "热度8","symbolSize": 9,"x": -104.31313,"y": 398.55301,"value": 50,"category": 1},{"id": "14","name": "公开1","symbolSize": 9,"x": -212.31313,"y": 205.55301,"value": "提前公开","category": 2},{"id": "15","name": "公开2","symbolSize": 9,"x": -242.31313,"y": 185.55301,"value": "未知","category": 2},{"id": "23","name": "状态1","symbolSize": 9,"x": -362.31313,"y": 235.55301,"value": "在审","category": 3},{"id": "24","name": "状态2","symbolSize": 9,"x": -322.31313,"y": 285.55301,"value": "发明公开","category": 3},{"id": "25","name": "状态3","symbolSize": 9,"x": -362.31313,"y": 265.55301,"value": 4,"category": 3},{"id": "26","name": "状态4","symbolSize": 9,"x": -342.31313,"y": 205.55301,"value": 9,"category": 3},{"id": "30","name": "测试1","symbolSize": 9,"x": -402.31313,"y": 345.55301,"value": "fsffrwgfergr","category": 4},{"id": "31","name": "测试2","symbolSize": 9,"x": -422.31313,"y": 285.55301,"value": "是","category": 4},{"id": "32","name": "发明人1","symbolSize": 9,"x": -402.31313,"y": 415.55301,"value": "应急管理部国家减灾中心（应急管理部卫星减灾应用中心）;中科星图股份有限公司","category": 5},{"id": "33","name": "发明人2","symbolSize": 9,"x": -382.31313,"y": 395.55301,"value": "李素菊;王平;刘宏新;马冯;刘明;谷昌军;金家栋;金晟玥","category": 5},{"id": "34","name": "发明人3","symbolSize": 9,"x": -362.31313,"y": 425.55301,"value": "??","category": 5},{"id": "35","name": "发明人4","symbolSize": 9,"x": -332.31313,"y": 455.55301,"value": "发明公开","category": 5},{"id": "36","name": "发明人5","symbolSize": 9,"x": -282.31313,"y": 455.55301,"value": "G06V20/10","category": 5},{"id": "37","name": "发明人6","symbolSize": 9,"x": -422.31313,"y": 465.55301,"value": "未知","category": 5}],"links": [{"source": "0","target": "1"},{"source": "0","target": "2"},{"source": "0","target": "3"},{"source": "0","target": "4"},{"source": "0","target": "5"},{"source": "1","target": "6"},{"source": "1","target": "7"},{"source": "1","target": "8"},{"source": "1","target": "9"},{"source": "1","target": "10"},{"source": "1","target": "11"},{"source": "1","target": "12"},{"source": "1","target": "13"},{"source": "2","target": "14"},{"source": "2","target": "15"},{"source": "2","target": "16"},{"source": "2","target": "17"},{"source": "2","target": "18"},{"source": "2","target": "19"},{"source": "2","target": "20"},{"source": "2","target": "21"},{"source": "2","target": "22"},{"source": "3","target": "23"},{"source": "3","target": "24"},{"source": "3","target": "25"},{"source": "3","target": "26"},{"source": "3","target": "27"},{"source": "3","target": "28"},{"source": "3","target": "29"},{"source": "4","target": "30"},{"source": "4","target": "31"},{"source": "5","target": "32"},{"source": "5","target": "33"},{"source": "5","target": "34"},{"source": "5","target": "35"},{"source": "5","target": "36"},{"source": "5","target": "37"}],"categories": [{"name": "432523533628510A"},{"name": "A类"},{"name": "B类"},{"name": "C类"},{"name": "D类"},{"name": "E类"}] }
