You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.1 KiB
71 lines
2.1 KiB
<template><div id="container"></div> </template>
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import { Graph } from '@antv/x6';
|
|
|
|
export default defineComponent({
|
|
name: 'NsFlowChart',
|
|
setup() {},
|
|
mounted() {
|
|
const data = {
|
|
// 节点
|
|
nodes: [
|
|
{
|
|
id: 'node1', // String，可选，节点的唯一标识
|
|
x: 40, // Number，必选，节点位置的 x 值
|
|
y: 40, // Number，必选，节点位置的 y 值
|
|
width: 80, // Number，可选，节点大小的 width 值
|
|
height: 40, // Number，可选，节点大小的 height 值
|
|
label: 'hello', // String，节点标签
|
|
line: {
|
|
stroke: 'orange',
|
|
},
|
|
},
|
|
{
|
|
id: 'node2', // String，节点的唯一标识
|
|
x: 160, // Number，必选，节点位置的 x 值
|
|
y: 180, // Number，必选，节点位置的 y 值
|
|
width: 80, // Number，可选，节点大小的 width 值
|
|
height: 40, // Number，可选，节点大小的 height 值
|
|
label: 'world', // String，节点标签
|
|
},
|
|
],
|
|
// 边
|
|
edges: [
|
|
{
|
|
source: 'node1', // String，必须，起始节点 id
|
|
target: 'node2', // String，必须，目标节点 id
|
|
},
|
|
],
|
|
};
|
|
const graph = new Graph({
|
|
container: document.getElementById('container') as HTMLElement,
|
|
|
|
background: {
|
|
color: '#191F27', // 设置画布背景颜色
|
|
},
|
|
grid: {
|
|
size: 10, // 网格大小 10px
|
|
type: 'dot',
|
|
visible: false, // 渲染网格背景
|
|
args: {
|
|
color: '#fff', // 网格线/点颜色
|
|
thickness: 0.5, // 网格线宽度/网格点大小
|
|
},
|
|
},
|
|
snapline: {
|
|
enabled: true,
|
|
className: 'my-snapline',
|
|
},
|
|
});
|
|
|
|
graph.fromJSON(data);
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
#container {
|
|
width: 1000px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|