G6
G2
G6
F2
L7
墨者学院
关于 G6
图表示例
API 文档
使用教程
返回旧版
树图
紧凑树
系统树
脑图树
辐射树
树图-边上显示label
文件系统
自定义树图
大数据量的树图
流图
桑基图
流程图
ER图
自定义流程图
网图
力导图
小米关系图谱
弧线图
环形弧线图
图布局
Circular 环图参数变化
Fruchterman 布局参数变化
Dagre 参数变化
Radial 布局参数变化
Radial 交互扩展节点
点击扩展节点
布局数据变化
子图布局
自定义布局 - 二分图
布局的时机监听
Bubbles 力导气泡
树和气泡
动画
状态切换
节点动画
默认动画
自定义动画
自定义元素
卡片节点
饼图节点
列表节点
面积图节点
环形柱状图节点
折线图节点
标注图节点
堆积柱状图节点
自定义折线方法1
自定义折线方法2
自定义箭头
交互
切换节点图片
动态加载数据
动态加载多条数据
Circle节点分组
Rect节点分组
文本
省略文本
文本换行
元素样式
内置节点和边
贝塞尔曲线
多标签节点
多标签边
辅助工具
Tooltip 节点和边的提示框
Minimap 缩略图
Grid 网格
Context Menu 右键菜单
响应节点区域事件
点击节点移动到中心
复杂案例
美国航线边绑定
北京地铁
聚类的折叠/扩展交互
自定义资金流转图
ER图
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ER图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script> <script> G6.registerEdge('relation', { draw: function draw(cfg, group) { var keyShape = group.addShape('path', { attrs: { path: [['M', cfg.startPoint.x, cfg.startPoint.y], ['L', cfg.endPoint.x, cfg.endPoint.y]], stroke: '#666', lineWidth: 2, lineAppendWidth: 4 } }); var center = keyShape.getPoint(0.5); var shapeContainer = group.addGroup(); var point = G6.Util.getLabelPosition(keyShape, 0, 10, 4, true); group.addShape('text', { attrs: { text: cfg.sourceEntity, x: point.x, y: point.y, rotate: point.rotate, fill: '#666' } }); point = G6.Util.getLabelPosition(keyShape, 1, -15, 4, true); group.addShape('text', { attrs: { text: cfg.targetEntity, x: point.x, y: point.y, fill: '#666', rotate: point.rotate } }); shapeContainer.transform([['t', -center.x, -center.y], ['r', point.angle], ['t', center.x, center.y]]); shapeContainer.addShape('path', { attrs: { path: [['M', center.x - 40, center.y], ['L', center.x, center.y - 20], ['L', center.x + 40, center.y], ['L', center.x, center.y + 20], ['Z']], fill: '#fff', stroke: '#666' } }); shapeContainer.addShape('text', { attrs: { text: cfg.relation, x: center.x, y: center.y, textAlign: 'center', textBaseline: 'middle', fill: '#666' } }); return keyShape; } }); var graph = new G6.Graph({ container: 'mountNode', width: 800, height: 500, modes: { default: ['drag-node', 'drag-canvas', 'zoom-canvas'] } }); var data = { nodes: [{ id: 'customer', label: 'customer', x: 200, y: 200, shape: 'rect', size: [60, 40] }, { id: 'customer_id', label: 'customer_id', x: 120, y: 160, shape: 'ellipse', size: [80, 40] }, { id: 'name', label: 'name', x: 140, y: 100, shape: 'ellipse', size: [80, 40] }, { id: 'address', label: 'address', x: 180, y: 60, shape: 'ellipse', size: [80, 40] }, { id: 'email', label: 'email', x: 240, y: 110, shape: 'ellipse', size: [80, 40] }, { id: 'order', label: 'order', x: 400, y: 200, shape: 'rect', size: [60, 40] }, { id: 'order_id', label: 'order_id', x: 320, y: 130, shape: 'ellipse', size: [80, 40] }, { id: 'order_status', label: 'order_status', x: 380, y: 80, shape: 'ellipse', size: [80, 40] }, { id: 'total_price', label: 'total_price', x: 440, y: 150, shape: 'ellipse', size: [80, 40] }, { id: 'employee', label: 'employee', x: 380, y: 380, shape: 'rect', size: [60, 40] }, { id: 'employee_id', label: 'employee_id', x: 320, y: 440, shape: 'ellipse', size: [80, 40] }, { id: 'title', label: 'title', x: 440, y: 440, shape: 'ellipse', size: [80, 40] }], edges: [{ id: 'c_id', source: 'customer', target: 'customer_id' }, { id: 'c_name', source: 'customer', target: 'name' }, { id: 'c_address', source: 'customer', target: 'address' }, { id: 'c_email', source: 'customer', target: 'email' }, { id: 'o_id', source: 'order', target: 'order_id' }, { id: 'o_price', source: 'order', target: 'total_price' }, { id: 'o_status', source: 'order', target: 'order_status' }, { id: 'c_o', source: 'customer', target: 'order', relation: 'places', sourceEntity: '1', targetEntity: 'N', shape: 'relation' }, { id: 'o_e', source: 'employee', target: 'order', relation: 'finalize', sourceEntity: '1', targetEntity: 'N', shape: 'relation' }, { id: 'e_id', source: 'employee', target: 'employee_id' }, { id: 'e_title', source: 'employee', target: 'title' }] }; graph.data(data); graph.render(); </script> </body> </html>