深圳市住房和建设局红色警示_得物app订单制作_搜索引擎优化策略包括_市场营销策划方案模板

安装 antv/X6

npm i @antv/x6

<template><div class="homes"><div class="Shang">上</div><div class="Zhong"><div id="container"></div></div><div class="Xia">下</div></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Graph } from "@antv/x6";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，节点标签},{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，必须，起始节点 idtarget: "node2", // String，必须，目标节点 id},],
};
let graph = null;const chushih = () => {graph = new Graph({container: document.getElementById("container"),width: 800,height: 600,background: {color: "#f7f7f7", // 设置画布背景颜色},grid: {size: 20, // 网格大小 10pxvisible: true, // 渲染网格背景type: 'dot', // 'dot' | 'fixedDot' | 'mesh'// args: { //   color: '#36d', // 网格线/点颜色//   thickness: 2,     // 网格线宽度/网格点大小// },args: [{ color: '#36d', // 主网格线颜色thickness: 1,     // 主网格线宽度},{ color: '#ff0', // 次网格线颜色thickness: 1,     // 次网格线宽度factor: 4,        // 主次网格线间隔},],},});graph.fromJSON(data);
};onMounted(() => {chushih();
});
</script><style lang="less" scoped>
.homes {width: 100%;height: 100vh;display: flex;flex-direction: column;.Shang {width: 100%;height: 100px;background-color: burlywood;}.Zhong {flex: 1;box-sizing: border-box;padding: 10px;background-color: #d7c5c5;}.Xia {width: 100%;height: 100px;background-color: burlywood;}
}
</style>