提示:接下来所有演示均以vue为主

1.在vue中实现一个hello -world

<template>
  <div>
    <div
      id="graphContainer"
      
    ></div>
  </div>
</template>

<script>
import mxgraph from "./mxgraph";
const {
  mxGraph,
  mxClient,
  mxCodec,
  mxUtils,
  mxConstants,
  mxPerimeter,
} = mxgraph;

export default {
  mounted() {
    if (!mxClient.isBrowserSupported()) {
      // 判断是否支持mxgraph
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      // 在容器中创建图表
      let container = document.getElementById("graphContainer");

      var graph = new mxGraph(container);

      // 生成 Hello world!
      var parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }
    }
  },
};
</script>

<style>
#graphContainer{
  width: 700px;
  height: 500px;
  border: 3px solid rgb(194, 185, 185);
  background-image: url('../assets/grid.gif');
  margin: auto;
}
</style>

生成mxgraph图形如图所示:
在这里插入图片描述

1.创建mxgraph容器
// 在容器中创建图表
      let container = document.getElementById("graphContainer");

      var graph = new mxGraph(container);
2.设置容器样式(添加背景图)

我采用的是外部设置样式
首先grid.gif图片,是上文讲到的本地下载里面拿到的
具体目录为:

这里是引用
当然你也可以在安装的依赖中找到

3.生成节点
var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);

insertVertex
参数1:parents 生成节点要插入的父级容器
参数2:null 此处可以设置节点的id,便于识别节点,null为默认id
参数3:label 此处设置节点的内容
参数4:设置节点大小及节点在父级容器中的相对位置

4.生成边
graph.insertEdge(parent, null, "", v1, v2);

insertEdge
参数1:parents 生成边要插入的父级容器
参数2::null 此处可以设置节点的id,便于识别边,null为默认id
参数3:label 此处设置节点的内容
参数4:边的起始节点和终止节点

5.mxgraph图的更新等、
graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }

graph.getModel().beginUpdate(); 表示mxgraph图准备更新前的状态
graph.getModel().endUpdate(); 表示mxgraph图更新后的状态

Logo

前往低代码交流专区

更多推荐