ECharts关系图，节点可拖拽，添加节点和边的点击事件

        最近在做一个neo4j前端可视化的任务，对比了ECharts.js，Cytoscape.js和D3.js几个前端可视化工具，最终选择了ECharts.js，百度的一款开源工具，简单好用，比较容易上手。后台采用Python的Django框架，主要用于接收前端的请求，从neo4j数据库获取数据，并将数据传给前端服务器展示。这里只展示ECharts的用法以及自己的一些总结，为以后打下一个基础。首先展示下效果图：

EChart.js下载：https://www.echartsjs.com/download.html

        点击进入下载页面后，选择一个版本，点击进入相应的github地址，在点击source code(zip)，下载完成后将其解压，在dist文件夹下又一个echarts.js文件，这个文件就是我们需要的，将其复制到项目中相应的js目录中即可。

        由于这里采用的布局是force，不是通过坐标进行节点的生成，所以不能参考网上其他的采用坐标的节点拖拽。对此百度了许多，最后找到了一种合适的方法。我们需要对源码进行一些修改，只需要注释掉一行代码即可进行拖拽，这个方法主要参考另一位作者：https://blog.csdn.net/qq_38880340/article/details/85683322。打开源码，大概在1317行，将下图所示注释掉之后，选择保存即可。

        我们在echarts.js同级目录下新建一个html文件，在head中引入echarts.js，在body中设置一个div，一定要设置这个div的宽和高，不然不会显示出关系图，完整代码如下所示。

        

        其中的entityRelation即为我们从后台获得的经过处理后的数据（这里只是为了展示最后的关系图，所以直接将数据写在了这里），r 代表的关系，m 代表的是第二个实体，原数据过多，就删除了其中的一部分。key_word为第一个实体，也是中心节点，entityRelation中的 r 指的就是中心点key_word到第二个实体 m 的关系。

        data[]是echart中所有的节点的数组，包括所有的实体，links[]即为实体之间所有关系的数组。每个节点都有id，name，category等参数，category主要用于节点（实体）的分类，不同种类的实体用不同的颜色区分出来，相关注释可以在代码中查看。relation主要描述的是起始节点和指向的结束节点，是links[]数组的参数。

       echarts中的参数过多，可以参考官方文档，或者下载的source code中的例子，或者参考下边的文章，对echarts的参数进行了总结：http://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html。

点击事件：

        对节点和边添加点击事件，主要通过click方法实现，代码可以参考上边给出的。可以通过将param打印出来查看里边的具体参数，更方便下一步的处理。