实现功能：

初始加载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,
            legendHoverLink: true, //图例hover时联动高亮
            //symbol:'arrow',//可选择节点为圆形还是...
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 20,
                },
              },
            },
            force: {
              repulsion: 2500,
              edgeLength: [40, 150], //关系图节点间距离
              layoutAnimation: true, //
              friction: 0.1, //关系图节点动作快慢
            },
            draggable: true, //是否可拖拽
            focusNodeAdjacency: true, //移动到节点突出显示节点和有关系的边
            itemStyle: {
              normal: {
                color: "#30807d",
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#30807d",
                opacity: 0.7,
                curveness: 0.3, //边的曲度
              },
            },
            edgeLabel: {
              normal: {
                show: true,
                formatter: function (x) {
                  return x.data.name;
                },
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {},
              },
            },
            data: this.datas,
            links: this.links,
          },
        ],
      };
      if (alldata) {
        option.series[0].data = alldata;
        option.series[0].links = alllink;
      }
      this.myChart.setOption(option);
    },
    searchrel() {
      if (true) {
        let arr1 = {
          username: this.name,
        };
        this.axios
          .post("http://127.0.0.1:8000/relation", arr1)
          .then((res) => {
            // console.log(res);
            // console.log("ok");

            if (res.result === "该用户不存在") {
              alert("此用户不存在！");
            } else {
              this.datas = res.data.msg.data;
              this.links = res.data.msg.link;
              this.alldata = res.data.msg.data;
              this.alllink = res.data.msg.link;
              this.jiandata[this.name]["name"] = this.name;
              this.jiandata[this.name]["nextnode"] = res.data.msg.data;
              this.jiandata[this.name]["nextlink"] = res.data.msg.link;
              // console.log(this.jiandata);
              // let myChart = this.$echarts.init(document.getElementById("main"));
              this.showchart();
            }
          })
          .catch((err) => console.log(err));
      } else {
        alert("请输入用户名");
      }
    },
    addsearch(name) {
      this.clickname = name;
      if (name) {
        let arr1 = {
          username: name,
        };
        this.axios
          .post("http://127.0.0.1:8000/relation", arr1)
          .then((res) => {
            // console.log(res);
            // console.log("新增成功");
            if (res.result === "该用户不存在") {
              alert("此用户不存在！");
            } else {
              console.log("新增成功");
              this.adddatas = res.data.msg.data;
              this.addlinks = res.data.msg.link;
              this.jiandata[this.clickname] = {};
              this.jiandata[this.clickname]["name"] = this.clickname;
              for (let i = 0; i < this.alllink.length; i++) {
                if (this.alllink[i].target == this.clickname) {
                  this.jiandata[this.clickname]["toponelink"] = this.alllink[i];
                  this.jiandata[this.clickname]["toponenode"] = this.alllink[
                    i
                  ].source;
                }
                if (this.alllink[i].source == this.clickname) {
                  this.jiandata[this.clickname]["toponelink"] = this.alllink[i];
                  this.jiandata[this.clickname]["toponenode"] = this.alllink[
                    i
                  ].target;
                }
              }
              console.log(this.jiandata);

              this.jiandata[this.clickname]["nextnode"] = res.data.msg.data;
              this.jiandata[this.clickname]["nextlink"] = res.data.msg.link;

              this.alldata = this.deteleObject(
                this.alldata.concat(this.adddatas)
              );
              this.alllink = this.deteleObject(
                this.alllink.concat(this.addlinks)
              );
              // console.log(this.alldata);
              let option = this.myChart.getOption();
              // console.log(option);
              // console.log(this.alldata);
              // for (let i = 0; i < this.alldata.length; i++) {
              //   console.log(this.alldata[i].name);
              // }
              option.series[0].data = this.alldata;
              option.series[0].links = this.alllink;
              // console.log(option);
              this.myChart.clear();
              this.myChart.setOption(option);
            }
          })
          .catch((err) => console.log(err));
      } else {
        let option = this.myChart.getOption();
        option.series[0].data = this.alldata;
        option.series[0].links = this.alllink;
        this.myChart.clear();
        this.myChart.setOption(option);
      }
    },
    showcharts() {
      let that = this;
      this.myChart = this.$echarts.init(document.getElementById("main"));
      this.searchrel();
      this.myChart.on("click", function (params) {
        // console.log(params);
        if (params.dataType === "node") {
          // console.log(params.data.name);
          if (that.jiandata.hasOwnProperty(params.data.name)) {
            console.log("you");
            let hasname = that.jiandata[params.data.name];
            console.log(that.alldata);
            // console.log(that.alllink);
            for (let i = 0; i < hasname.nextlink.length; i++) {
              let index = that.alllink.indexOf(hasname.nextlink[i]);
              if (index > -1) {
                that.alllink.splice(index, 1);
              }
            }
            for (let i = 0; i < hasname.nextnode.length; i++) {
              let index = that.alldata.indexOf(hasname.nextnode[i]);
              if (index > -1) {
                that.alldata.splice(index, 1);
              }
            }
            // that.alldata.push({ name: hasname.name });
            // that.alldata.push({ name: hasname.toponenode });
            // that.alllink.push({ name: hasname.toponelink });
            delete that.jiandata[params.data.name];
            console.log(that.jiandata);
            console.log(that.alldata);
            // console.log(that.alllink);
            that.addsearch();
          } else {
            that.addsearch(params.data.name);
          }

          // let option = that.myChart.getOption()
          // console.log(option)
          // console.log(that.alldata)
          // option.series[0].data = that.alldata;
          // option.series[0].links = that.alllink;
          // console.log(option)
          // that.myChart.setOption(option);

          // that.showchart(myChart, , that.alllink);
        }
        // console.log(params);
      });
    },