一、背景
项目中要开发一个表示数据库表关联关系的图,在选型时费了些功夫。先后尝试了几种方案,Canvas和SVG(不好用),jsplumb(适合做流程图,太重),最终当看到echarts 中的graph 的时候,我眼前一亮,就是她了。
数据库表关联关系图只做个轻量级的展示和简单的操作,如添加节点,连接表节点,在节点连线上展示连接条件等功能,这就需要我们对 echarts 做些改造,增加些记忆功能和点击事件。下面是指引我的思路几个问题:
1、怎么去添加节点
2、添加节点时候怎么知道坐标(echarts 展示节点需要定义坐标)
3、添加节点后怎么出发echarts 重新刷新视图(添加节点是一个组件,图展示是另一个组件)
4、什么时候去请求表的字段信息(字段表格关联条件时候需要用到)
5、连线怎么连
6、关联条件的弹出框是用一个还是用多个(用一个时怎么做切换)
7、关联条件的添加删除修改逻辑怎么去做,怎么去保存
8、最终条件怎么保存(所有连线和所有节点等等)