简介这是一份面向数据可视化与大屏展示场景的ECharts关系图示例资源适合前端开发者、数据分析师以及需要呈现社交网络、组织架构、网络拓扑等复杂关系结构的工程人员。压缩包共3个文件包含2个JavaScript文件和1个HTML页面整体约970KB。其中JS文件承担了ECharts初始化、关系图数据组织与布局配置等核心逻辑HTML页面作为展示入口可直接在浏览器中打开预览便于快速看到图表效果并对照学习。资源中还涉及力导向布局、圆形布局、节点形状与颜色、连线样式定制以及拖拽、缩放、点击节点查看详情等交互功能能帮助开发者理解如何将静态关系数据转化为可探索的动态可视化界面。已有102人学习和下载整体体量轻、结构清晰既可作为快速上手的参考样例也能在项目中直接复用或扩展进一步用于大屏实时数据监控与分析。1. 拿到 ECharts关系图-关系图20.rar先想清楚你要的是示例还是方案ECharts 关系图graph是数据可视化里最容易让人眼前一亮的图表类型社交网络、知识图谱、组织架构、数据库表关系都能用它画。ECharts关系图-关系图20.rar这类压缩包一般是从 ECharts 社区或资源站整理下来的关系图示例代码合集里面要么是 20 个关系图变体要么是某个关系图项目第 20 版。对刚接触的人来说解压后最大的困惑是代码能跑但不知道怎么改成自己的数据。这篇文章讲清楚关系图背后的数据结构、最小运行方式、关键参数和踩坑点让你拿到手后能把它改造成自己的业务可视化。2. 关系图的数据结构nodes、links、categories 是怎样串起来的关系图能不能跑通七分看数据结构三分看配置。ECharts 的 graph 系列接受三个顶层数组nodes定义节点links定义节点之间的连线categories给节点分组归类。很多人在 RAR 示例里看到一长串配置就发怵其实把这三个数组搞明白剩下的都是锦上添花。2.1 关系图选型为什么用 ECharts 而不是纯 D3 或 AntVECharts 关系图本质上是把节点-连线这种图结构画到 Canvas 上。相比 D3 自己操作 SVG 逐个 append 节点ECharts 把力导向布局、缩放拖拽、标签避让这些高频需求封装成了配置项。如果需求是一个能交互的关系图ECharts 是上手成本最低的。AntV G6 也很强但它的 API 思路偏向图分析学习曲线比 ECharts 陡。我的经验是不需要路径查找、环检测等图算法只做展示和轻交互无脑选 ECharts。ECharts 关系图在 echarts 数据可视化生态里属于中等偏上的复杂度它的核心不是配置多而是数据结构必须正确。先用一个最小示例把它跑起来再一层层加配置比直接背参数有效得多。下面这个例子不依赖任何后端一个 HTML 文件就能在浏览器里画出三个人之间的关联关系。2.2 最小可运行示例一个 HTML 文件画出最基本的关系网先看最小可运行的代码。创建一个 HTML 文件通过 CDN 引入 ECharts!DOCTYPE html html langzh-cn head meta charsetUTF-8 title最小关系图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script /head body div idgraph stylewidth: 800px; height: 600px;/div script const chart echarts.init(document.getElementById(graph)); const option { series: [{ type: graph, layout: force, data: [ { name: 张工, symbolSize: 40 }, { name: 李工, symbolSize: 30 }, { name: 王工, symbolSize: 30 } ], links: [ { source: 张工, target: 李工 }, { source: 张工, target: 王工 } ], label: { show: true, position: right } }] }; chart.setOption(option); /script /body /html这段代码的逻辑是先用echarts.init绑定容器 DOM再构造一个option。data数组里每个对象是一个节点必须有name作为唯一标识links数组里每一项是一条边source和target必须对应data里的name这是新手最容易翻车的地方——名称对不上边就画不出来而且 ECharts 不会报错只会悄悄丢边。layout: force表示用力导向布局让节点自动散开symbolSize直接写在节点数据里控制节点圆的大小。把文件拖进浏览器只要不报跨域错误就能看到两个连线指向同一个中心节点的关系图。从编码角度说data里的name就是节点的主键links通过主键引用节点和 MySQL 表之间的外键关系是同一个思路。这也解释了为什么很多人会把数据库表关系映射成关系图来展示——从「mysql 的表导出 er 关系图」的需求到 ECharts 关系图差的只是把表名当节点、把外键当连线。2.3 数据从哪里来把 MySQL 表结构转成 nodes 和 links最常见的业务场景不是手写节点数据而是从数据库或者后端接口拿。我一般会写一段脚本把 MySQL 的表结构导出成关系图需要的数据格式。以 information_schema 里的外键约束为例查询每张表的主外键关系SELECT rc.TABLE_NAME AS source, kcu.REFERENCED_TABLE_NAME AS target FROM information_schema.REFERENTIAL_CONSTRAINTS rc LEFT JOIN information_schema.KEY_COLUMN_USAGE kcu ON rc.CONSTRAINT_NAME kcu.CONSTRAINT_NAME AND rc.TABLE_SCHEMA kcu.TABLE_SCHEMA WHERE rc.CONSTRAINT_SCHEMA your_database;这条 SQL 查出来的每一行是一条外键关联source 是子表名target 是父表名。拿到结果后在后端或者用 python 把行转成 ECharts 关系图的 nodes 和 links 即可。核心转换逻辑是所有表名去重后放进data每行外键关系放进links顺便把表名按业务模块分组映射成categories这样图上就能按模块着色。用 python 编程实现关系的管理及关系图的生成也很常见思路是先用pymysql查数据库再拼 ECharts 的 option JSON最后用pyecharts直接输出 HTML。pyecharts 是对 ECharts 的 Python 封装底层生成的就是同一份 ECharts 配置调试时可以直接看它导出的 JSON 文件import pymysql from pyecharts import options as opts from pyecharts.charts import Graph # 查询外键关系 conn pymysql.connect(hostlocalhost, userroot, password****, databaseyour_database) cursor conn.cursor() cursor.execute( SELECT rc.TABLE_NAME, kcu.REFERENCED_TABLE_NAME FROM information_schema.REFERENTIAL_CONSTRAINTS rc LEFT JOIN information_schema.KEY_COLUMN_USAGE kcu ON rc.CONSTRAINT_NAME kcu.CONSTRAINT_NAME WHERE rc.CONSTRAINT_SCHEMA your_database ) rows cursor.fetchall() # 去重构造节点 node_names set() for source, target in rows: node_names.add(source) node_names.add(target) nodes [{name: name} for name in node_names] # 外键行直接作为连线 links [{source: source, target: target} for source, target in rows] # 输出静态 HTML graph ( Graph() .add(, nodes, links, repulsion400, edge_length100) .set_global_opts(title_optsopts.TitleOpts(title数据库表关系)) ) graph.render(db_er_graph.html)pymysql负责连接数据库cursor.execute执行的是和上面相同的 SQLrows是查到的表关系元组列表。node_names是一个 set天然去重先把所有表名收集起来变成节点。Graph().add是 pyecharts 的链式调用repulsion400对应 ECharts 里的斥力大小edge_length100对应边的理想长度。最后render直接生成一个独立 HTML双击就能打开看效果。这套流程跑通后你就拥有了一条从数据库结构到关系图的自动化输出链路RAR 里的静态示例反而成了次要的参考物。3. 解压 RAR 并跑通示例从压缩包到浏览器出图拿到压缩包后的第一个动作是解压第二个动作是把示例跑起来第三个动作才是改造。这三个动作里藏着不少新手容易忽略的细节尤其在 rar 格式和本地文件访问策略上。3.1 用 7-Zip 解压 RAR命令、目录结构与文件格式rar 格式是专有压缩格式Windows 下可以用 WinRAR也可以用 7-Zip——很多新手会问「7zip 可以解压 rar 文件吗」答案是当然可以。7-Zip 是免费软件对 rar 的解压支持很完善唯一做不了的是创建 rar 压缩包。命令行解压# 列出压缩包内容先看里面是什么 7z l ECharts关系图-关系图20.rar # 完整解压到当前目录 7z x ECharts关系图-关系图20.rar # 解压到指定目录-o 后面不要有空格 7z x ECharts关系图-关系图20.rar -o./echarts-graph-demo参数说明l是 list列出压缩包内容而不解压适合先确认里面是 HTML 文件还是整套工程x是解压命令-o后面紧跟输出目录注意-o和目录名之间不能有空格这是 7-Zip 命令行的经典坑。这类 RAR 包里最常见的文件格式是.html和.jsHTML 里通常已经写好了 ECharts 的 CDN 引用和关系图配置JS 文件里则可能是复用的数据或封装好的函数。解压后目录一般长这样一个或多个 HTML 文件、可能有个js子目录放 ECharts 本地库、还可能有个data.json之类的关系数据文件。如果只有 HTML 且用的是 CDN 引入 ECharts那么文件本身是独立的双击就能跑如果引用了本地echarts.js注意相对路径别动——目录结构一变路径失效就直接白屏。3.2 本地起 HTTP 服务双击打开和 localhost 的区别很多 RAR 示例里会用fetch加载本地 JSON 数据这时直接双击 HTML 会失败——浏览器出于安全策略禁止从file://协议下读取本地文件。现象是节点画不出来打开开发者工具 F12 看到Access to fetch at file:///... has been blocked by CORS。解决办法是起一个本地 HTTP 服务让页面从localhost加载。最轻量的方式是用 Python# Python 3 自带 http.server cd ECharts关系图-关系图20 python -m http.server 8080然后在浏览器访问http://localhost:8080/关系图.html就能正常跑。-m http.server是 Python 内置的静态文件服务器端口默认 8000我写 8080 是为了避免占用。提示8080 端口可能被其他程序占用报错就换 8000 或者 3000。只要页面里有fetch、XMLHttpRequest或者import一律走 HTTP 服务别双击。如果你电脑装了 Node.js也可以npx serve .零配置启动——这是我很常用的方式。记住一条原则RAR 示例如果同时带了数据文件那 HTML 大概率不是设计成双击运行的起 HTTP 服务是第一个要做的动作而不是跳过它直接看代码。3.3 替换成自己的数据把硬编码 JSON 换成接口返回RAR 里的示例数据在跑通之后下一步就是把写死的节点和边替换成你自己的业务数据。常见做法是保留示例的 HTML 结构把option里data和links赋值的地方改成fetch请求后端接口。fetch(/api/relationships) .then(res res.json()) .then(data { const option { tooltip: {}, series: [{ type: graph, layout: force, roam: true, data: data.nodes, links: data.links, categories: data.categories, label: { show: true } }] }; chart.setOption(option); });fetch是浏览器原生 API第一个参数是接口地址返回的 Promise 链上先res.json()把响应转成 JSON再拿data里的nodes、links、categories填进 option。接口返回的 JSON 结构必须和 ECharts 约定一致nodes是数组、每项至少带namelinks是数组、每项带source和target。如果后端返回的字段名不是这三个就在.then里做一次映射比如后端叫from和to就写成links: data.map(d ({ source: d.from, target: d.to }))。这一步做好后RAR 里的示例就彻底变成了你自己的接口驱动的关系图组件后续开发只需要维护后端数据前端的图形配置基本不再改动。4. 关系图的 12 个关键配置参数布局、力引导、标签、连线示例跑通只是开始真正让关系图变得好用的是参数调节。ECharts 的 graph 系列配置项很多但核心参数就围绕布局、视觉、交互三块。4.1 layout 与 force力导向图不是越用力越好关系图的两个核心布局是force和circular。force是力导向模拟物理世界中节点互相排斥、边拉住两端的力学效果circular是环形布局节点均匀分布在圆环上。演示数据小的时候看不出差别一旦节点超过五十个力导向图可能一直抖动停不下来环形布局则稳定得多。力导向的核心参数集中在force对象里series: [{ type: graph, layout: force, force: { repulsion: 300, // 节点间的斥力越大节点越散 edgeLength: [50, 200],// 边的理想长度范围 gravity: 0.1, // 引力把所有节点往中心拉 friction: 0.6 // 摩擦系数越大运动衰减越快 } }]repulsion是最需要调的参数——节点密集重叠了就调大图形松散得不成样子了就调小。edgeLength接受一个数组表示边的理想长度范围ECharts 会让边尽量落在这个区间。gravity是整体向心力值太小节点会飘到画布边缘值太大会挤成一团。friction控制迭代收敛速度值越大动画衰减越快我在实际项目里一般取 0.6 到 0.8太小的话图会一直呼吸不停给人迟滞感。这些都是血泪经验力导向图不是越用力越好而是要让系统在 2 到 3 秒内稳定下来。4.2 视觉通道symbolSize、label、lineStyle、edgeSymbol关系图的信息传递依赖几个视觉通道节点大小、节点颜色、连线粗细、连线样式、标签位置。节点大小用symbolSize可以直接写数值也可以写成回调函数让数据驱动symbolSize: (val) { // val 是节点的 value 字段常用于表示节点权重 return Math.max(10, Math.min(60, Math.sqrt(val) * 3)); }这个回调的val是节点数据里的value通常由后端统计得出比如每个节点关联的边数。用Math.sqrt开方是为了让面积差异更真实——节点大小和面积成比例视觉上才不会出现小节点被大节点吞掉的情况。label控制标签position: right放在节点右侧formatter可以回调格式化显示内容。连线样式用lineStyle和edgeSymbol配合edgeSymbol可以在边两端画箭头或圆圈用来表达方向性lineStyle: { color: source, // 连线颜色跟随起点节点 width: 2, curveness: 0.1, // 弯曲度避免多条边重叠 opacity: 0.7 }, edgeSymbol: [circle, arrow], edgeSymbolSize: [4, 8]curveness是多边关系图的关键——如果两个节点之间有多条边直线时后画的边会盖住先画的设 0.1 到 0.3 的弯曲度每条边按索引递增弯曲才能看清多条平行边。edgeSymbol的数组第一位是边起点符号第二位是边终点符号[circle, arrow]表示起点是圆、终点是箭头适合表达有向关系。4.3 交互与性能roam、draggable、大数据量降级关系图默认支持节点拖拽但缩放和平移需要显式开启。roam: true让用户可以缩放和移动整个图draggable: true让单个节点可以被拖动拖动后力导向会重新分配布局。建议开启但注意如果图是静态展示且不需要用户操作这些配置会引入不必要的性能消耗。大数据量下节点几百、边上千关系图会明显变卡。ECharts 官方建议开启animation: false关闭入场动画能省不少渲染开销。另一个常用降级手段是控制标签显示——节点太小的就不画文本标签只显示圆点配合label.show的回调按节点大小动态控制。更激进的做法是在后端做一次度数过滤只返回关联数量大于阈值的节点和它们的边把图先瘦身再渲染。这些技巧在 echarts 社区里讨论很多核心思路是关系图是给人看拓扑结构的不是让人数每个点的该丢的细节要果断丢。5. 踩坑记录关系图跑不起来的 5 个典型原因以下每条都是我在实际项目里踩过的坑按「现象 → 原因 → 解决」的顺序写供你对照排查。5.1 节点只显示一个点连线全部丢失现象图能渲染但只有一个孤零零的节点连线一条都没有。原因links里source或target与data里的name大小写不一致或者带隐藏空格。ECharts 对不上号不会报错只会静默丢弃。解决在浏览器 console 里直接打印option.series[0].links和data逐一比对 name写脚本生成数据时统一 trim 掉首尾空格并确保来源表字段没有不可见字符。这个坑几乎每个做关系图的人都会踩一遍属于典型的黑匣子问题——它不报错所以只能靠自己核对数据。5.2 RAR 解压后 HTML 中文乱码现象解压后用浏览器打开 HTML页面上中文标签全是乱码。原因原文件是 GBK 或 GB2312 编码而页面里声明的是utf-8或者根本没有声明 charset。解决用 VS Code 或 Notepad 打开 HTML 文件右下角当前编码如果是 GBK点击后选择通过编码重新打开切换成 UTF-8然后另存为 UTF-8 覆盖原文件。注意如果 HTML 里有charsetutf-8但文件实际是 GBK必须重新保存编码才能生效。这个坑在从老资源站下载的 RAR 包里极常见因为这些文件大多是早年编的远早于 UTF-8 成为事实标准。5.3 双击 HTML 能出来图但加载不了数据文件现象双击 HTML页面框架出来了关系图空白起 HTTP 服务后一切正常。原因页面用fetch或XHR请求了同目录下的 JSON 数据文件浏览器在file://协议下禁止这种跨文件读取。解决别双击用 Python 起静态服务器命令在 3.2 节已经写过。这个不算 ECharts 的锅是浏览器安全策略但新手很容易被误导成代码写错了。5.4 力导向图一直在晃动停不下来现象布局结束后图还在缓慢移动像活的一样让人看着心烦。原因friction太小或者gravity太大导致系统动能衰减太慢。解决把force.friction调到 0.7 以上同时检查repulsion是否过大——斥力越大节点越难稳定。我自己的习惯是先调friction再调repulsion。还有一点roam: true开启后用户鼠标滚动触发缩放也会让节点看起来在动需要确认是不是这个交互引起的。5.5 压缩包加密导致解压失败现象解压时提示输入密码。原因发布者给 RAR 设置了密码保护可能是123456之类的简单密码也可能根本没有。解决先去资源站的简介页找密码提示常见做法是把密码写在文章末尾或文件名注释里。如果实在找不到只能联系发布者。注意市面上声称可以破解 rar 密码的工具大概率是流氓软件或诱导捆绑。安全起见从正规渠道拿到密码再解压是最稳妥的路径别为这一点省时间而侥幸安装来路不明的软件。6. 把关系图封装成 Vue 组件换数据就能复用最后给一个实用的进阶方向把解压跑通的示例封装成 Vue 组件以后任何业务场景只要换个数据源就能用。组件核心逻辑是mounted里初始化图表、watch选项里监听数据变化自动更新同时记得在beforeDestroy时调用chart.dispose()销毁实例避免内存泄漏。template div refgraphContainer stylewidth: 100%; height: 500px;/div /template script import * as echarts from echarts; export default { props: { nodes: { type: Array, required: true }, links: { type: Array, required: true }, categories: { type: Array, default: () [] } }, mounted() { // 直接挂到 this 上避免 Vue 对 echarts 实例做响应式劫持 this.chart echarts.init(this.$refs.graphContainer); this.render(); window.addEventListener(resize, this.handleResize); }, watch: { nodes() { this.render(); }, links() { this.render(); } }, methods: { render() { this.chart.setOption({ tooltip: {}, series: [{ type: graph, layout: force, roam: true, data: this.nodes, links: this.links, categories: this.categories, label: { show: true, position: right } }] }); }, handleResize() { this.chart this.chart.resize(); } }, beforeDestroy() { window.removeEventListener(resize, this.handleResize); this.chart this.chart.dispose(); } }; /script这个组件的使用方式父组件从接口拉数据组装成nodes和links数组直接传给组件即可。我在实际项目里已经把关系图封装成类似的组件适配过知识图谱、业务流程监控、组织架构梳理三类场景每次只是数据源不同配置基本没动过。验证封装是否可靠的技巧是看三个点数据更新时组件是否自动重绘watch 生效、频繁切换页面路由再回来是否白屏dispose/init 配对、容器大小变化时图形是否被裁切resize 监听。这三关过了组件就基本能上线了。回到ECharts关系图-关系图20.rar这个包本身我给你的建议是把它当成一个可以修改的起点而不是一个拿来即用的成品。先解压跑通再按第 4 章的参数逐个调整视觉最后用第 3 章的方法把数据源换成你自己的接口。关系图这个方向在 echarts 数据可视化里属于投入产出比很高的类型——数据模型简单、视觉冲击强、适用场景多值得花时间把配置吃透。高效的做法是按「节点-连线-分组」三件套来组织你的数据。别像我第一次那样拿到示例就急着改颜色结果改了半小时发现改的是柱状图的配置希望能帮到你。本文还有配套的精品资源点击获取