mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 19:58:46 +08:00
88 lines
2.2 KiB
HTML
88 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>label上面文本太长，需要换行：加入\n；</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
/**
|
||
* 该案例演示当label太长时候，如何换行显示。
|
||
* by 镜曦。
|
||
*
|
||
*/
|
||
const data = {
|
||
nodes: [{
|
||
x: 100,
|
||
y: 100,
|
||
shape: 'rect',
|
||
label: '这个文案\n有点长',
|
||
id:'node1',
|
||
labelCfg: {
|
||
position: 'bottom'
|
||
},
|
||
anchorPoints: [
|
||
[0, 0.5, {type: 'circle', style: {stroke: 'red', fill: 'red'}}],
|
||
[1, 0.5, {type: 'circle', style: {stroke: 'blue', fill: 'red'}}]
|
||
]
|
||
},{
|
||
x: 300,
|
||
y: 100,
|
||
shape: 'rect',
|
||
label: '这个文案\n也有点长',
|
||
id:'node2',
|
||
labelCfg: {
|
||
position: 'bottom'
|
||
},
|
||
anchorPoints: [
|
||
[0, 0.5, {type: 'circle', style: {stroke: 'red', fill: 'red'}}],
|
||
[1, 0.5, {type: 'circle', style: {stroke: 'blue', fill: 'red'}}]
|
||
]
|
||
}
|
||
],
|
||
edges: [
|
||
{
|
||
source: 'node1',
|
||
target: 'node2',
|
||
label: 'label上面这个文本太长了\n我需要换行',
|
||
labelCfg: {
|
||
refY: 20
|
||
},
|
||
style: {
|
||
endArrow: true
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 1000,
|
||
height: 600,
|
||
defaultNode: {
|
||
style: {
|
||
fill: '#87e8de',
|
||
},
|
||
color: '#87e8de'
|
||
},
|
||
defaultEdge: {
|
||
color: '#bae7ff'
|
||
},
|
||
modes: {
|
||
default: ['drag-node', {
|
||
type: 'drag-node',
|
||
}],
|
||
}
|
||
});
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |