mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 12:49:04 +08:00
90 lines
2.1 KiB
HTML
90 lines
2.1 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>
|