Echarts 关系图 整条关系高亮

img

Echarts 关系图 我想实现所有有关系的节点都高亮，如上图鼠标移到浮游植物然后浮游植物=>浮游动物=>大鱼=>虎鲸整条关系高亮显示，目前只是相邻节点高亮，请各位指点一二

如果按你说的，会不会出现指向浮游植物节点，所有的节点都亮了呢？因为他们之间都有至少一条关系链！

配置项中添加emphasis时的效果，使用dispatchAction手动控制高亮

series:[
  {
    ....,
    emphasis: {
      lineStyle: {
        color: '#42cccc'
      }
    }
  }
]

因为emphasis属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点dataIndex。

let currentDataIndexs = []

点击时手动触发相关节点的高亮：

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
  const dataIndexs = treeAncestors.map((item) => item.dataIndex)
  // 重新保存当前高亮的节点
  currentDataIndexs = dataIndexs

  // 高亮相关节点连线
  myChart.dispatchAction({
    type: 'highlight',
    dataIndex: dataIndexs
  })
})

还需要覆盖emphasis的默认行为，也就是鼠标移入事件：

// 节点鼠标移入事件
myChart.on('mouseover', function (params) {
  // 取消当前节点的高点，顶替默认事件
  myChart.dispatchAction({
    type: 'downplay',
    dataIndex: params.dataIndex
  })

  // 高亮点击已保存的相关节点的连线，防止上一步取消了已保存节点的高亮
  myChart.dispatchAction({
    type: 'highlight',
    dataIndex: currentDataIndexs
  })
})