记 echarts 关系图 整条关系高亮效果

项目需求是 鼠标移入节点，该节点所在的整条直系关系高亮
focusNodeAdjacency: true的效果是实现相两个节点高亮不满足项目需求的；
翻遍全网看到有个朋友说用使用dispatchAction手动控制高亮

       myChart.on('click', function (params) {
  // 先取消已高亮的节点连线
  myChart.dispatchAction({
    type: 'downplay',
    dataIndex: currentDataIndexs
  })
 
  // 针对非最尾节点点击收缩展开后已高亮线路失效
  if (params.data.children) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: currentDataIndexs
    })
    return
  }
 
  const treeAncestors = params.treeAncestors //但是我，params没有treeAncestors，只能拿到一个dataIndex，解决办法是 myChart.getModel().getSeriesByIndex(0).getData().graph.edges所有的链接线，然后通过里边的id过滤出需要高亮的线，取出dataIndex
  const dataIndexs = treeAncestors.map((item) => item.dataIndex)
  // 重新保存当前高亮的节点
  currentDataIndexs = dataIndexs
 
  // 高亮相关节点连线
  myChart.dispatchAction({
    type: 'highlight',
    dataIndex: dataIndexs
  })
})

这方法我后面仅仅实现了所以的点高亮，线没有高亮

有了上面的思路，后面退而求次，选择采用双击，重新绘制整条关系图，再次双即绘制完整关系图

   //  originNodes  全量节点
   // originEdges  全量线
myChart.on("dblclick", (params) => {
            console.log("移入id----", params);

            if (isClick) { // true表示已经点击，再次点击就绘全量的关系图
                option.series[0].data = originNodes 
                option.series[0].links = originEdges

                myChart.setOption(option)

                isClick = false

                return;

            }

            isClick = true

            const paramsId = params.data.name;

            if (!paramsId) return;

            const findEdges = []

            // 寻找上级
            const superIds = [paramsId];
            const superObjs = [false];

            function findSuperIds(nodesIds) {
                for (let i = 0; i < nodesIds.length; i++) {
                    if (!superObjs[i]) {
                        const id = nodesIds[i];
                        for (let j = 0; j < originEdges.length; j++) {
                            const edges = originEdges[j];
                            if (edges.target === id && nodesIds.indexOf(edges.source) === -1) {
                                nodesIds.push(edges.source);
                                superObjs.push(false);
                                findEdges.push(edges)
                            }
                        }
                        superObjs[i] = true;
                    }
                }
            }

            findSuperIds(superIds);

            // 寻找子级
            const subIds = [paramsId];
            const subObjs = [false];

            function findSubIds(nodesIds) {
                for (let i = 0; i < nodesIds.length; i++) {
                    if (!subObjs[i]) {
                        const id = nodesIds[i];
                        for (let j = 0; j < originEdges.length; j++) {
                            const edges = originEdges[j];
                            if (edges.source === id && nodesIds.indexOf(edges.target) === -1) {
                                nodesIds.push(edges.target);
                                subObjs.push(false);
                                findEdges.push(edges)
                            }
                        }
                        subObjs[i] = true;
                    }
                }
            }

            findSubIds(subIds);

            const allIds = new Set([...superIds, ...subIds]);
            const ids = Array.from(allIds);

            const nodeIndexList = [];
            for (let i = 0, len = originNodes.length; i < len; i++) {
                const node = originNodes[i];
                if (ids.includes(node.name)) {
                    nodeIndexList.push(node);
                }
            }
            console.log("所有的node---", nodeIndexList, findEdges);
            option.series[0].data = nodeIndexList
            option.series[0].links = findEdges
            myChart.setOption(option)
        });

最终实现效果如上图