使用echarts写关系图graph
关系图是 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类" } ] }
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具