echarts 力导图 force图 客制化实现：节点图片，关系线悬停，图片下载，扩展收缩等

// 注意清除画布、解绑点击事件、loading判断等
async detailImgClick(row) {
      this.innerModal = true;
      this.ifDetail = true;
      this.rowGraph = row;
      this.vids = []
      this.vids.push(this.rowGraph.vid)
      var graph = await this.postGraph(this.vids);
      var myChart;
      myChart = echarts.init(document.getElementById("chartContainer"));
      myChart.clear();
      myChart.showLoading();

      // var graph = {
      //   categories: [{ name: 'node' }],
      //   edges: [
      //     {
      //       srcId: 'user1node_57',
      //       dstId: 'user1node_28',
      //       edgeName: 'atSpace_demand',
      //       ranking: 0,
      //     },
      //     {
      //       srcId: 'user1node_57',
      //       dstId: 'user1node_4',
      //       edgeName: 'isUser',
      //       ranking: 0,
      //       isMeasure: false,
      //     },
      //     {
      //       srcId: 'user1node_74',
      //       dstId: 'user1node_4',
      //       edgeName: 'isUser',
      //       ranking: 0,
      //       isMeasure: false,
      //     },
      //   ],
      //   node: [
      //     {
      //       vid: 'user1node_331',
      //       tag: 'NetworkAccess',
      //       userType: 1,
      //       userId: 1,
      //       vid: 'user1node_331',
      //     },
      //     {
      //       vid: 'user1node_513',
      //       tag: 'NetworkAccess',
      //       userType: 1,
      //       userId: 1,
      //       vid: 'user1node_513',
      //     },
      //     {
      //       vid: 'user1node_812',
      //       tag: 'NetworkAccess',
      //       userType: 1,
      //       userId: 1,
      //       vid: 'user1node_812',
      //     },
      //   ],
      // }
      this.ifDetail = false;

      var option = await this.setOption(graph);

      myChart.hideLoading();
      // echarts图表的点击事件，可通过param参数确认点击的对象
      let self = this;
      myChart.off("click");
      myChart.on("click", async function(param) {
        console.log(param);
        if (self.vids.includes(param.name)) {
          self.vids = self.vids.filter(item => item !== param.name);
        } else {
          self.vids.push(param.name);
        }
        console.log(self.vids)
        if (param.dataType == "node") {
          // Node2的 param.dataIndex 值为1
          var graph = await self.postGraph(self.vids);
          myChart.clear();
          var option = await self.setOption(graph);
          myChart.setOption(option);
          if (param.dataIndex == 1) {
            // 判断点击的次数，单数显示Node5数据，双数隐藏
            myChart.setOption(option);
          }
        } else {
          console.log("点击了边", param);
        }
      });
      myChart.setOption(option);
      // setTimeout(myChart.setOption(option), 500);

      // if (option && typeof option === "object") {
      //   myChart.setOption(option);
      // }

      window.addEventListener("resize", myChart.resize);
    },
    async getGraph(vid) {
      let params = {
        id: this.setID,
        userId: this.rowGraph.userId,
        fenceId: this.rowGraph.fenceId,
        vid: vid
      };
      let res = (await getGraph(params)).data.data;
      return res;
    },
    async postGraph(vids) {
      let params = {
        id: this.setID,
        vids: vids
      };
      let res = (await postGraph(params)).data.data;
      return res;
    },
    setOption(graph) {
      var option = {
        title: {
          text: "拓扑图",
          color: "black"
        },
        legend: [
          {
            data: graph.categories.map(function(a) {
              return a.name;
            })
          }
        ],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: function(params) {
            if (params.dataType === "edge") {
              // return param.data.value;
              return (
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">edgeName：' +
                params.data.tipData.edgeName +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">isMeasure：' +
                params.data.tipData.isMeasure +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">isMeasure：' +
                params.data.tipData.isQoe +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">ranking：' +
                params.data.tipData.ranking +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">trueData：' +
                params.data.tipData.trueData +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">trueEdge：' +
                params.data.tipData.trueEdge +
                "</span>" +
                "<br>" +
                '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">trueLevel：' +
                params.data.tipData.trueLevel +
                "</span>"
              );
            }
            // return param.data.value;
            return (
              '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">Tag：' +
              params.data.tipData.tag +
              "</span>" +
              "<br>" +
              '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">deviceModel：' +
              params.data.tipData.deviceModel +
              "</span>" +
              "<br>" +
              '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">createTime：' +
              params.data.tipData.createTime +
              "</span>" +
              "<br>" +
              '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">fenceId：' +
              params.data.tipData.fenceId +
              "</span>" +
              "<br>" +
              '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">userId：' +
              params.data.tipData.userId +
              "</span>" +
              "<br>"
            );
          }
        },
        series: [
          {
            type: "graph",
            layout: "force", // 力引导布局，不包含节点中提供的 x， y 作为节点的位置
            // data: graph.nodes,
            // links: graph.links,
            // categories: graph.categories,
            data: graph.nodes.map(function(node) {
              return {
                category: 0,
                name: node.vid,
                tipData: node
              };
            }),
            edges: graph.edges.map(function(edge) {
              return {
                source: edge.srcId,
                target: edge.dstId,
                tipData: edge
              };
            }),
            categories: graph.categories,
            // large: true,
            // largeThreshold: 1000,
            label: {
              show: true,
              position: "bottom",
              formatter: "{b}"
            },
            symbolSize: 18, // 节点大小
            labelLayout: {
              hideOverlap: false
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            roam: false,
            draggable: true,
            // focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            // animationDurationUpdate: 0, //更新数据，会导致布局错乱
            edgeSymbol: ["none", "arrow"],
            force: {
              edgeLength: 200, // 边的两个节点之间的距离
              repulsion: 100, //节点之间的斥力因子。
              gravity: 0.02 //节点受到的向中心的引力因子。
            },
            lineStyle: {
              // color: "#31354B",
              // curveness: 0.1
            },
            autoCurveness: 0.01, //多条边的时候，自动计算曲率
            emphasis: {
              focus: "",
              lineStyle: {
                width: 5
              }
            },
            edgeLabel: {
              //边的设置（节点之间的关系）
              show: true,
              position: "middle",
              fontSize: 12,
              lineHeight: 1, //字与线之间的距离
              textStyle: {
                fontSize: 12 //line线上字体大小
              },
              formatter: params => {
                return params.data.tipData.edgeName;
              }
            }
          }
        ]
      };
      return option;
    }

* 自定义图片
     */
    for (var i = 0;i < data.length;i++){
        if (data[i].type == 'Internet'){
            data[i].symbol = 'image://image/internet.png';
            data[i].symbolSize = 70;
        }
        if (data[i].type == 'switch'){
            data[i].symbol = 'image://image/switch.png';
        }
        if (data[i].type == 'hub'){
            data[i].symbol = 'image://image/hub.png';
        }
        if (data[i].type == 'computer'){
            data[i].symbol = 'image://image/computer.png';
        }
        if (data[i].type == 'rooter'){
            data[i].symbol = 'image://image/rooter.png';
        }
        if (data[i].type == 'service'){
            data[i].symbol = 'image://image/service.png';
        }
        if (data[i].type == 'print'){
            data[i].symbol = 'image://image/print.png';
        }
        if (data[i].type == 'phone'){
            data[i].symbol = 'image://image/phone.png';
        }