维帝博客 - 利用echarts做知识图谱的可视化

## 一、简介
在使用neo4j对数据进行图式存储后，可以通过neo4j的端口，在浏览器上对数据进行查询更新等操作。但是要想将这些数据在自己的网站上进行显示就需要用到前端技术了。在这里我们用echarts对数据进行可视化展示。echarts是基于javascript的图表库。可以用来绘制各种各样的图表。仿制neo4j进行数据展示，可以采用力导向图实现。

## 二、工具
HBuilder

JQuery库

echarts库

## 三、实现原理

echarts对象的初始化

设置数据的类别

编写功能配置信息option:标题、提示框、工具箱、图的类型、给节点和边赋值

将option赋给echarts对象

## 四、具体代码及注释

1.引入jquery包以及echarts包。

![](https://img-blog.csdnimg.cn/2019092615063870.png)

2.用echarts画图（javascript语言）

以三国人物为例：

```javascript
var myChart = echarts.init(document.getElementById('main'));
var categories = [{name:"蜀"},{name:"魏"},{name:"吴"}];
    option = {
        // 图的标题
        title: {
            text: '三国人物关系图'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            //设置可以根据类别显示or隐藏节点
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },
            // 数据
            data: [{
                name: '刘备',
                des: '刘备',
                symbolSize: 70,//节点大小
                category: 0,//设置节点所属类别
            },//...后续数据省略
            links: [{
                source: '关羽',//源节点
                target: '刘备',//目标节点
                name: '义弟',//关系
                des: ''
            }, //定义关系，后续省略
            categories: categories,//给类别赋值
           }]
        };
        myChart.setOption(option);
```

### 运行结果：

![](https://img-blog.csdnimg.cn/20190926151451667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpamlhY2h1,size_16,color_FFFFFF,t_70)

## 五、总结
echarts是一款强大的绘图工具，配合javascript可以实现更多的交互功能。如：可以通过单击某节点，隐藏指向此节点的其他节点。再次点击，重新显示隐藏的节点。