echarts 关系图 高亮整条链路

ECharts是一个强大的JavaScript图表库，用于数据可视化。在创建关系图（通常称为树状图或链接图）时，如果你想高亮显示整个链条，可以使用`emphasis`状态样式来实现。首先，在配置项中设置节点的`emphasis`样式，例如颜色、边线粗细等。然后，通过`series.data`数组中的`children`属性关联节点，并为其设置`hover`属性，当鼠标悬停在其中一个节点上时，递归地将与其相关的所有节点标记为高亮。

下面是一个简单的例子：

{
  series: [{
    type: 'graph',
    // 数据结构，每个节点包含name、value以及其children
    data: [...],
    
    emphasis: {
      itemStyle: { color: '#fff', lineWidth: 3 } // 高亮时的颜色和边线宽度
    },
    
    edgeSymbol: 'arrow', // 边线箭头样式
    edgeSymbolSize: [8, 8], // 箭头大小
    
    edges: [
      {
        source: 'nodeA',
        target: 'nodeB',
        hoverAnimation: true, // 悬停时动画效果
        lineStyle: {
          normal: {
            width: 1,
            curve: 'sin'
          },
          emphasis: { // 高亮时的边线样式
            width: 3,
            color: '#f00' // 红色
          }
        }
      },
      ... // 更多边缘配置
    ]
  }]
}

当用户鼠标悬停在链条上的任意节点时，整条链路上的节点都会按照设置的样式变化，直到鼠标移开。