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

<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>