前言
最近项目需求,要做一个知识图谱,参照为思知.然后就去看了一下效果及他的实现方案,也找了其他的方案,对比之后发现echarts的关系图实现起来比较简单,于是乎就基于echarts的graph关系图实现.(ps:思知实现方式是d3).
效果图
正文
接下来开始讲解代码逻辑:
目录结构
- KnowledgeGraph.vue文件为外层大页面
- keywords.vue 文件为类目滚动页面
- charts.vue 文件为图谱页面
- mock.js为模拟数据
实现逻辑 先描述一下实现功能,点击类目页面或者搜索框输入查询到对应的一二级图谱,然后点击节点可以实现折叠展开效果,由于echarts4去掉了ingore字段,所以只能每次重新组装数据更新画布来实现折叠展开效果. 使用echarts,graph类型图表,layout使用force(力布局引导)主要配置参数可以查看echarts官方文档.这里我贴一下我大致用到的属性
主要关注links,data,categories属性,links字段主要作用是两点关联关系,用于节点之间的连线,主要用到属性 value:线上边展示的文本,target,source连接线两点的节点id,
(这里需要注意我踩得一个坑,就是id只能为string类型,当为number类型的时候,连线有问题).
data属性作用是每个节点信息,id需要唯一.我用到的内容
isClick和isRoot字段为我自定义字段,用于处理逻辑使用.isClick标识当前节点是展开还是折叠状态,isRoot字段标识当前是否是搜索关键字,用于关键字样式定制,category字段需要配合外层的categories数组使用,用于定制化每个类别的样式.
主要方法 - 截图
主要方法 - 描述
当点击节点时候校验isRoot和isClick字段状态,如果是搜索关键字节点,则点击不响应(需求为点击搜索关键字不可折叠),然后判断isClick状态,如果为true则当前操作为折叠操作,找到当前data数据中parentId为当前点击节点id的数据(即当前点击节点下一级数据)全部移除,同步移除links数组数据;当isClick为false则为展开操作,拿到当前节点id去查询当前节点下一级数据,然后根据关系追加到当前data和links数组中,调用echarts实例的setOptions方法重新加载新数据.
结语
有需要的朋友可以下载源码根据自己需求修改,如有疑问可以联系我.有不对或者可以优化的地方欢迎指正.
当前有一些优化问题未解决:
1. 当设置节点可拖拽时,设置在节点上边的鼠标悬浮样式会被可拖拽的手势覆盖(应该是可拖拽手势优先级高);
2.先上边的鼠标样式没找到在哪里可以设置;
3.在有图区域内可以拖动整个图位置,但是在画布区域但是没有渲染图的区域点击是无法拖动的.
