用Echarts 制作一个数据库表的关联关系图(一)

时间:2024-03-22 15:14:56

一、背景

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

用Echarts 制作一个数据库表的关联关系图(一)

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

         1、怎么去添加节点

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

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

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

         5、连线怎么连

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

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

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