vue jointjs 拓扑图 自定义shape 按需引入

只展示部分核心代码，完整代码见文章尾部连接

import 'jointjs/dist/joint.core.css';

// 类库 包含: Paper Graph Cell CellView Element Link 等等
import { dia } from 'jointjs/src/core.mjs';
// 样式库 包含多个分组(basic standard custom ...)
import * as standard from 'jointjs/src/shapes/standard.mjs';
import * as layout from 'jointjs/src/layout/index.mjs';
import * as highlighters from 'jointjs/src/highlighters/index.mjs'
import * as util from 'jointjs/src/util/util.mjs'
import * as linkTools from 'jointjs/src/linkTools/index.mjs'

export default {
	install: function (Vue) {
		let joint = { dia };
		joint.shapes = { standard };
		joint.layout = layout;
		joint.highlighters = highlighters
		joint.util = util
		joint.linkTools = linkTools
		Object.defineProperty(Vue.prototype, '$joint', { value: joint });
	}
};

mounted() {
    console.log(`[${this.name}] Mounted:`, this.$refs.joint);
    this.init();
    setTimeout(() => {
      // 插入十万条数据
      const total = 6
      // 一次插入 20 条，如果觉得性能不好就减少
      const once = 6
      // 渲染数据总共需要几次
      const loopCount = total / once
      let countOfRender = 0
      let node = []
      let link = []
      function add() {
        // 优化性能，插入不会造成回流
        
        for (let index = 0; index < once; index++) {
          node.push({ id: index+1, label: "node" + (+index+1) })
          link.push({ from: 1, to: index+1 })
        }

        countOfRender += 1
        loop()
      }
      function loop() {
        if (countOfRender < loopCount) {
          window.requestAnimationFrame(add)
        }
      }
      loop()


      this.nodes = node;
      this.links = link;

      // this.nodes = [
      //   { id: 1, label: "node1node1node1" },
      //   { id: 2, label: "node2" },
      //   { id: 3, label: "node3" },
      // ];
      // this.links = [
      //   { from: 1, to: 2 },
      //   { from: 1, to: 3 },
      // ]
    }, 0)
    // this.$emit("init", this.graph);
  },

完整代码看下面的地址

vue-jointjs

---