Echarts+Vue 实现知识图谱

需求描述

把一类错综复杂的知识点按照相关性规则连线，客观汇总展现出来，切换类型可动态刷新图谱，图谱节点能点击交互。

实现效果

实现思路

先格式化处理后台拿到的数据，再利用Echarts 的 graph 类型图库进行配置绘制。

代码实现

先用mock造个数据实现接口，其中图谱数据中的 name就是节点展示的内容，category 可以作为过滤条件给节点设置不同的颜色，若要设置特殊大小可以symbolSize设值， id是用来前后连线的标识。

/** * 图谱数据源源 */ export const data = [ { id:1, name:'测试节点', categary:'1', symbolSize: 60 }, { id:2, name:'测试节点', categary:'1', symbolSize: 40 }, { id:3, name:'测试节点', categary:'2', }, { id:4, name:'测试节点', categary:'', }, { id:5, name:'测试节点测试节点', categary:'', }, { id:6, name:'测试节点', categary:'2', }, { id:7, name:'测试节点', categary:'', }, { id:8, name:'测试节点', categary:'', }, { id:9, name:'测试节点', categary:'', }, { id:10, name:'测试节点', categary:'',测试节点 } ]; //节点连线 let linkData = [ {source: '2', target: '3', name: ''}, {source: '3', target: '4', name: ''}, {source: '3', target: '5', name: ''}, {source: '5', target: '6', name: ''}, {source: '5', target: '7', name: ''}, {source: '5', target: '8', name: ''}, {source: '9', target: '10', name: ''}, {source: '10', target: '9', name: ''}, {source: '1', target: '2' , name: ''}, {source: '1', target: '10', name: ''} ] /** * 模糊查询大类 * @param {*} name */ export const search = (name)=>{ return new Promise((resolve,reject)=>{ let result = { seriesData: [], linksData: [] } let list = data.filter(item=>item.name.indexOf(name)>=0) if(list&&list.length>0){ result.seriesData = list ||[]; }else{ result.seriesData = data ||[]; } result.linksData = linkData ||[]; if(list.length>0){ resolve(result) }else{ reject() } }) } export const getAllData = ()=>{ return new Promise((resolve,reject)=>{ let result = { seriesData: [], linksData: [] } result.seriesData = data||[]; result.linksData = linkData ||[]; if(data.length>0){ resolve(result) }else{ reject() } }) } /** * 分类2 */ export const categarys = ["建设用地"]

封装一个chart组件，实现图谱展示

<template> <div id="chart" class="chart"></div> </template> <script> import { expendNodes } from "./mock"; var echarts = require("echarts/lib/echarts"); require("echarts/lib/chart/graph"); require("echarts/lib/component/tooltip"); require("echarts/lib/component/title"); export default { name: "Charts", props: { chartList: { type: Object, required: true, }, }, watch: { chartList: { handler(val) { this.formatData(val || [], true); }, }, }, data() { return { myChart: "", seriesData: [], seriesLinks: [], categories:[], lastClickId: "", colors: ["#a3d2ca","#056676","#ea2c62","#16a596","#03c4a1","#f5a25d", "#8CD282","#32e0c4","#00FAE1","#f05454"], }; }, methods: { /** * 节点点击事件 */ async nodeClick(params) { const index = this.seriesData.findIndex( (item) => item.id === params.data.id ); console.log('点了节点:'+index+1,"clicked"); }, /** * 设置echarts配置项,重绘画布 */ initCharts() { const that = this; if (!this.myChart) { this.myChart = echarts.init(document.getElementById("chart")); this.myChart.on("click", (params) => { if (params.dataType === "node") { //判断点击的是图表的节点部分 this.nodeClick(params); } }); } // 指定图表的配置项和数据 let option = { // 动画更新变化时间 animationDurationUpdate: 500, animationEasingUpdate: "quinticInOut", tooltip: { show: false, }, series: [ { type: "graph", layout: "force", legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。 hoverAnimation: true, //是否开启鼠标悬停节点的显示动画 focusNodeAdjacency: true, edgeLabel: { position: "middle", //边上的文字样式 normal: { show: true, textStyle: { fontSize: 12, }, position: "middle", formatter: function (x) { return x.data.name; }, }, }, edgeSymbol: ["", "arrow"], force: { edgeLength: 15, repulsion: 200, }, roam: true, draggable: true, //每个节点的拖拉 itemStyle: { normal: { color: "#00FAE1", cursor: "pointer", //color:Math.floor(Math.random()*16777215).toString(16), //color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'], label: { show: true, position: [-10, -15], textStyle: { //标签的字体样式 color: "#fff", //字体颜色 fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 fontWeight: "bold", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400... fontFamily: "sans-serif", //文字的字体系列 fontSize: 12, //字体大小 }, }, nodeStyle: { brushType: "both", borderColor: "rgba(255,215,0,0.4)", borderWidth: 1, }, }, //鼠标放上去有阴影效果 emphasis: { shadowColor: "#00FAE1", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 40, }, }, lineStyle: { width: 2, }, label: { fontSize: 18, }, symbolSize: 24, //节点大小 links: this.seriesLinks, data: this.seriesData, categories:this.categories, cursor: "pointer", }, ], }; // 使用刚指定的配置项和数据显示图表。 this.myChart.setOption(option); }, /** * 格式化数据到表格需要的数据 */ formatData(list, reset = false) { const that =this; let nodes = list.seriesData; this.seriesData = []; this.seriesLinks = []; let colorIndex = 0; let data =[]; let loadedCat=[]; nodes.forEach((item,index)=>{ if(item.categary && loadedCat.indexOf(item.categary) === -1){ colorIndex = Math.floor((Math.random()*that.colors.length)); loadedCat.push(item.categary); this.categories.push({name:item.categary}); } item.itemStyle = { color: that.colors[colorIndex], borderColor: '#ffffff' } data.push(item); }) this.seriesData.push(...data); this.seriesLinks.push(...list.linksData); this.initCharts(); }, }, beforeDestroy() {}, }; </script> <style scoped> .chart { height: 100%; } </style>

在其他组件中调用chart组件，并传入展示的数据内容

<Charts ref="charts" v-show="type === 2" :chartList="searchList" />

完毕！

__EOF__

本文作者： FCode 本文链接： https://www.cnblogs.com/codefree/p/16023008.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。

相关知识

基于枸杞病虫害知识图谱的问答系统研究与实现
基于知识图谱的医疗问答系统设计与实现.pdf
医疗知识图谱.pptx
医药行业知识图谱构建：挖掘医疗知识的宝藏
花卉食谱的知识图谱构建研究
面向梅花研究信息的知识图谱构建
基于知识图谱的花卉病虫害知识管理方法
基于知识图谱的水稻病虫害智能诊断系统
医疗领域知识图谱
平安智慧医疗正式推出中文医疗知识图谱

网址: Echarts+Vue 实现知识图谱 https://www.huajiangbk.com/newsview2289989.html