用echarts力导向图做类似neo4j的关系图，支持点击某个节点显示与此节点相关的多一层关系，再次点击删除此节点下关系

最新推荐文章于 2023-02-02 22:07:00 发布

weixin_44711531

最新推荐文章于 2023-02-02 22:07:00 发布

阅读量1.2k

点赞数

文章标签：可视化 javascript 知识图谱数据可视化 echarts

本文链接：https://blog.csdn.net/weixin_44711531/article/details/110490891

版权

本文介绍如何使用Echarts构建一个力导向图，展示类似Neo4j的关系图。功能包括：首次加载展示人物P1及其关联（a1,a2,a3,a4），点击人物加载其关联人物及关系，再次点击则隐藏相关关系。文章提供了一个初步实现，后续计划优化。" 128795992,7337247,技术管理者如何做好工作规划与目标设定,"['技术管理', '团队建设', '目标设定', '工作效率', '项目管理']

摘要由CSDN通过智能技术生成

实现功能：

初始加载P1相关的人物（a1,a2,a3,a4）以及关系，点击P1相关人物（a1），加载关于a1相关的人物和关系，同时展示P1相关的人物关系；如果a1相关人物关系已经在图上显示，再次点击此节点，则关闭此节点相关的人物关系展示

最初版本，逻辑可能会有些混乱，后面有时间再进行优化

以下为此项目代码:

export default {
  data() {
    return {
      name: "李宇春",
      datas: [],
      links: [],
      adddatas: [],
      addlinks: [],
      alldata: [],
      alllink: [],
      clickname: "",
      jiandata: {},
    };
  },

deteleObject(obj) {
      // 去除数组里重复的对象{}
      var uniques = [];
      var stringify = {};
      for (var i = 0; i < obj.length; i++) {
        var keys = Object.keys(obj[i]);
        keys.sort(function (a, b) {
          return Number(a) - Number(b);
        });
        var str = "";
        for (var j = 0; j < keys.length; j++) {
          str += JSON.stringify(keys[j]);
          str += JSON.stringify(obj[i][keys[j]]);
        }
        if (!stringify.hasOwnProperty(str)) {
          uniques.push(obj[i]);
          stringify[str] = true;
        }
      }
      uniques = uniques;
      return uniques;
    },
    showchart(alldata, alllink) {
      var option = {
        title: { 
          text: "人物关系图" ,
          textStyle:{
            color:'#fff'
          }
        },
        tooltip: {
          formatter: function (x) {
            return x.data.des;
          },
        },
        toolbox: {
          //可视化的工具箱
          show: true,
          feature: {
            saveAsImage: {
              //保存图片
              show: true,
            },
          },
        },
        series: [
          {
            type: "graph",
            layout: "force",
            cursor: "pointer",
            symbolSize: 80,