wx-g6-editor

安装教程

npm install wx-g6-editor

全局引入

import G6Editor from "wx-g6-editor";
import "../node_modules/wx-g6-editor/G6Editor.css";
Vue.use(G6Editor)

局部引入

<g6-Editor class="box” />

import {G6Editor} from "wx-g6-editor";

components: {
	G6Editor,
  },
  
  .box {
  	width: 500px;
  	height: 500px;
  	box-sizing: border-box;
  	position: relative;
  	overflow: hidden;
}

属性与使用

pageName：String ------------ canvas标题

nodes：Array ------------ 节点数据，各项通用属性如下

| 名称 | 是否必须 | 类型 | 备注 | | ---- | ---- | ---- | ---- | | id | true | String | 节点唯一 ID，必须是唯一的 string | | x | false | Number | x 坐标 | | y | false | Number | y 坐标 | |type |false| String| 指定节点类型，默认为 'circle'| |size |false| Number / Array| 节点的大小|

edges：Array ------------ 边数据

combos：Array ------------ 分组节点数据

graphData ：Object------------构建用例图数据如下所示

const nodes_data = {
  nodes: [
    {
      id: "0",
      x: 776,
      y: -5,
      type: "rect-zdy",
      label: "《Problem》",
    },
    {
      id: "120",
      x: -276,
      y: -57,
      type: "rect-zdy",
    },
    {
      id: "03",
      x: -588,
      y: -56,
      type: "rect-zdy",
      label: "《Problem3》",
      description: '描述文字'
    },
    {
      id: "1",
      x: 350,
      y: 400,
      type: "card-node",
      label: "UserCase" + '30',
      comboId: "combo",
    },
    {
      id: "11",
      x: 228,
      y: 137,
      type: "card-node",
      label: "UserCase" + '31',
      comboId: "combo",
    },
    {
      id: "111",
      x: 529,
      y: -61,
      type: "card-node",
      label: "UserCase" + '32',
      points: 'points',
      content: 'content'
    },
    {
      id: "2",
      x: 911,
      y: 216,
      type: "img-actor",
      label: "Actor23",
    },
    {
      id: "Actor25",
      x: -217,
      y: 274,
      type: "img-actor",
      label: "Actor25",
    },
  ],
  edges: [
    {
      source: "0",
      target: "1",
      type:'edge-d'
    },
    {
      source: "120",
      target: "111",
    },
    {
      source: "Actor25",
      target: "03",
      type:'edge-s-d',
    },
    {
      source: "1",
      target: "2",
      type:'edge-d-s',
    },
  ],
  combos: [
    {
      id: "combo",
      type: 'cRect',
      label: "默认combo",
    },
  ],
};
export {
  nodes_data
}