mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
37 lines
2.2 KiB
HTML
37 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>内置Shapes</title>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/minimap.js"></script>
|
|
<script src="../build/g6.js"></script>
|
|
<script>
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 800,
|
|
height: 600,
|
|
defaultNode: {
|
|
size: [40, 40]
|
|
},
|
|
modes: {
|
|
default: [ 'zoom-canvas', 'drag-canvas' ]
|
|
}
|
|
});
|
|
graph.addItem('node', { id: 'circle', shape:'circle', label: 'circle', x: 100, y: 100 });
|
|
graph.addItem('node', { id: 'rect', shape: 'rect', label: 'rect', labelCfg: { position: 'top' }, x: 550, y: 80, color: '#fe8550' });
|
|
graph.addItem('node', { id: 'ellipse', shape: 'ellipse', label: 'ellipse', labelCfg: { position: 'right' }, x: 300, y: 300, style: { fill: '#1890FF', stroke: '#1890FF' }, size: [60, 40] });
|
|
graph.addItem('node', { id: 'image', shape: 'image', label: 'image', labelCfg: { position: 'bottom'}, img: 'https://cdn.nlark.com/yuque/0/2019/png/174835/1553139586119-0360149e-a558-4712-9b71-3592dc1f52e4.png', x: 400, y: 500 });
|
|
graph.addItem('edge', { id: 'edge0', source: 'circle', target: 'rect', label: 'line' });
|
|
graph.addItem('edge', { id: 'edge1', source: 'circle', target: 'ellipse', shape: 'polyline', label: 'polyline', labelCfg: { position: 'center' }, controlPoints: [{ x: 100, y: 300 }]});
|
|
graph.addItem('edge', { id: 'edge2', source: 'ellipse', target: 'image', shape: 'cubic-vertical', labelCfg: { position: 'start', refY: -15 }, label: 'cubic-vertical', size: 2 });
|
|
graph.addItem('edge', { id: 'edge3', source: 'ellipse', target: 'rect', shape: 'quadratic', label: 'quadratic', controlPoints: [ { x: 300, y: 80 } ], labelCfg: { autoRotate: true }, });
|
|
graph.addItem('edge', { id: 'edge4', source: 'rect', target: 'rect', shape: 'loop', loopCfg: { dist: 60, position: 'bottom' }, size: 2, style: { endArrow: true } });
|
|
graph.addItem('edge', { id: 'edge4', source: 'rect', target: 'rect', shape: 'loop', loopCfg: { dist: 90, position: 'bottom' }, label: 'loop', labelCfg: { refY: -10 }, size: 2, style: { endArrow: true } });
|
|
graph.addItem('edge', { id: 'edge5', source: { x: 550, y: 300 }, target: { x: 600, y: 650 }, label: 'standalone line' });
|
|
</script>
|
|
</body>
|
|
</html>
|