用Echarts 制作一个数据库表的关联关系图（一）

一、背景

      项目中要开发一个表示数据库表关联关系的图，在选型时费了些功夫。先后尝试了几种方案，Canvas和SVG（不好用），jsplumb（适合做流程图，太重），最终当看到echarts 中的graph 的时候，我眼前一亮，就是她了。

         数据库表关联关系图只做个轻量级的展示和简单的操作，如添加节点，连接表节点，在节点连线上展示连接条件等功能，这就需要我们对 echarts 做些改造，增加些记忆功能和点击事件。下面是指引我的思路几个问题：

         1、怎么去添加节点

         2、添加节点时候怎么知道坐标（echarts 展示节点需要定义坐标）

         3、添加节点后怎么出发echarts 重新刷新视图（添加节点是一个组件，图展示是另一个组件）

         4、什么时候去请求表的字段信息（字段表格关联条件时候需要用到）

         5、连线怎么连

         6、关联条件的弹出框是用一个还是用多个（用一个时怎么做切换）

         7、关联条件的添加删除修改逻辑怎么去做，怎么去保存

         8、最终条件怎么保存（所有连线和所有节点等等）