mxgraph vue 笔记（一）转

1. 安装

npm install mxgraph --save

2. 新建index.js文件

import mx from 'mxgraph';
const mxgraph = mx({
  mxImageBasePath: './src/images',
  mxBasePath: './src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

export default mxgraph;

3. 页面引入

<template>
  <div ref="container"></div>
</template>

import mxgraph from 'index.js';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;

4. hello world

  mounted() {
    if (!mxClient.isBrowserSupported()) {
      // 判断是否支持mxgraph
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      // 再容器中创建图表
      let container = document.getElementById("graphContainer");
      let MxGraph = mxGraph;
      let MxCodec = mxCodec;
      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);
        var v3 = graph.insertVertex(
          parent,
          null,
          "everyBody!",
          300,
          350,
          60,
          60
        );
        graph.insertEdge(parent, null, "", v1, v2);
        graph.insertEdge(parent, null, "", v2, v3);
        graph.insertEdge(parent, null, "", v1, v3);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }
      // 打包XML文件
      let encoder = new MxCodec();
      let xx = encoder.encode(graph.getModel());
      // 保存到getXml参数中
      this.getXml = mxUtils.getXml(xx);
    }
  }

5. 效果

   
   hello world

本文转自vue中使用mxgraph