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组件，实现图谱展示

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

完毕！