AntV X6 流程图

最新推荐文章于 2024-08-19 17:47:26 发布

liyifan_xlb

最新推荐文章于 2024-08-19 17:47:26 发布

阅读量2.9k

点赞数 1

分类专栏：需求文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_45264264/article/details/121328269

版权

本文详细介绍了如何安装和使用AntV X6进行流程图的创建。内容涵盖HTML结构的设计、JavaScript代码的组织，以及最终实现的效果展示。

摘要由CSDN通过智能技术生成

安装 AntV X6

npm install @antv/x6 --save

html结构

<div class="editor" ref="editor" style="height: 400px"></div>

js结构

  initEditor() {
      // 获取容器的宽高
      const { clientHeight: height, clientWidth: width } = this.$refs["editor"];
      console.table({ width, height });
      /** 初始化实例 */
      this.graph = new Graph({
        // 容器
        container: this.$refs["editor"],
        // 宽高
        width: width,
        height: 400,
        connecting: {
          connector: { name: "smooth" },
        },
      });
      console.log("graph: ", this.graph);
      const appNodes = [
        {
          x: 500,
          y: 50,
          attrs: {
            body: {
              fill: "#e2e8f0",
              stroke: "#cbd5e1",
            },
            label: {
              fill: "#334155",
            },
            text: {
              fontSize: 18,
              textWrap: {
                text: "数据采集",
                width: -15,
              },
            },
          },
        },
        {
          x: 700,
          y: 50,
          attrs: {
            body: {
              fill: "#e2e8f0",
              stroke: "#cbd5e1",
            },
            label: {
              fill: "#334155",
            },
            text: {
              fontSize: 18,
              textWrap: {
                text: "计费",
                width: -15,
              },
            },
          },
        },
        {
          x: 900,
          y: 50,
          attrs: {
            body: {
              fill: "#e2e8f0",
              stroke: "#cbd5e1",
            },
            label: {
              fill: "#334155",
            },
            text: {
              fontSize: 18,
              textWrap: {
                text: "多协议接入",
                width: -15,
              },
            },
          },
        },
        {
          x: 1100,
          y: 50,
          attrs: {
            body: {
              fill: "#e2e8f0",
              stroke: "#cbd5e1",
            },
            label: {
              fill: "#334155",
            },
            text: {
              fontSize: 18,
              textWrap: {
                text: "数据分发",
                width: -15,
              },