GoJs绘制E-R图时，把layout设置为ForceDirectedLayout

    在最近的项目中，由于表的数据太多，绘制出来的E-R图很乱：所有的表会连续排在一起，有关联的两张表中间可能横着很多张没有关联的表，因此有关联的表之间的关系就会看得很不明了。

    这里我用这个方法解决这个问题：把layout设置为ForceDirectedLayout（力导向布局）。这样，有关联关系的表展示在一边，没关联关系的表整齐的排在另一边。修改步骤如下：

    首先，在定义画布时，定义一个ForceDirectedLayout布局。

        $(go.Diagram, this.title,
            {
              initialContentAlignment: go.Spot.Center,
              'undoManager.isEnabled': true,
              // 不允许使用delete键删除节点
              'commandHandler.deletesTree': true,
              'grid.visible': false, // 画布上面是否出现网格
              scale: 0.7,
              layout: $(go.ForceDirectedLayout, {
                defaultSpringLength: 50,
                defaultElectricalCharge: 20
              })
            })

  然后，在定义Link时设置节点不交叉。

$(go.Link,
            {
              routing: go.Link.Orthogonal,
              corner: 0,
              layerName: 'Background' // 不要在任何节点前面交叉
            }

最终效果如下：

具体代码如下：

<template>
  <div
    :id='boxId'
    class="er-box"
    v-loading="loadingChange"
    element-loading-text="拼命加载中">
    <div
      style="z-index: 1;"
      v-if="fullShow">
      <el-row
        :gutter="20">
        <el-col
          :span="10">
          <el-select
            v-model="keyword"
            filterable
            :reserve-keyword="true"
            clearable
            placeholder="请输入表英文名"
            style="width:100%;z-index: 1000;">
            <el-option
              v-for="item in searchList"
              :key="item.tableName"
              :label="item.tableName"
              :value="item.tableName">
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="2">
          <el-button
            type="primary"
            @click="getData()">
            搜索
          </el-button>
        </el-col>
        <el-col
          :span="12">
          <div
            class="header-right-box"
            style="float: right; margin-right: 16px;">
            <img
              class="full-img"
              src="../../../../../assets/er-images/fullscreen.png"
              @click="enterFullScreen"
              v-if="fullShow">
            <el-button
              style="margin-right: -6px"
              icon="el-icon-minus"
              @click="changeScale('reduce')"></el-button>
            <el-select
              v-model="myDiagramScale"
              placeholder="请选择"
              style="width: 100px"
              @change="changeScale('change')">
              <el-option
                v-for="item in scales"
                :key="item.lable"
                :label="item.lable"
                :value="item.val">
              </el-option>
            </el-select>
            <el-button
              style="margin-left: -6px ;font-size: 14px"
              icon="el-icon-plus"
              @click="changeScale('add')"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div
      class="full-btn-box"
      v-if="!fullShow">
      <img
        src="../../../../../assets/er-images/ic_er_renew.png"
        @click="exitFullScreen"
        v-if="!fullShow"
        class="exitFullScreenBtn">
    </div>
    <div
      :id='title'
      style='width:100%; height:690px;background:#fff'
      @contextmenu.prevent="showRight"></div>
    <!--点击画板右击弹出框-->
    <div
      :id="rightId"
      class="er-right-box"
      v-show="erRight">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        v-if="erRight"
        style="z-index:99999;">
        <el-submenu
          index="1">
          <template
            slot="title">
            <div
              class="submenu-item">
              视图
            </div>
          </template>
          <el-menu-item
            index="1-1">
            <el-checkbox
              v-model="showItem.isType"
              label="显示数据类型"
              name="type"
              @change="changeData"></el-checkbox>
          </el-menu-item>
          <el-menu-item
            index="1-2">
            <el-checkbox
              v-model="showItem.isNull"
              label="显示为空"
              name=