vue知识图谱可视化_知识图谱(节点关系图)-echarts实现方案

前言

最近项目需求,要做一个知识图谱,参照为思知.然后就去看了一下效果及他的实现方案,也找了其他的方案,对比之后发现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需要唯一.我用到的内容