antv g6点击高亮

您好，使用 AntV G6 实现点击节点高亮的方法如下：

1. 首先，需要在初始化图表时开启节点的交互事件：

const graph = new G6.Graph({
  container: 'container',
  // ...其他配置
  modes: {
    default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
    // 开启节点的交互事件
    nodeActive: ['hover', 'dragNode', 'clickSelect'],
  },
  // ...其他配置
});

2. 然后，在节点的模板中增加点击事件处理函数，例如：

const node = {
  type: 'circle',
  size: 50,
  // ...其他配置
  // 增加点击事件处理函数
  onClick: (e) => {
    const { item } = e;
    graph.setItemState(item, 'selected', true);
  },
};

3. 最后，定义节点的选中状态样式，例如：

graph.node({
  // ...节点的其他样式配置
  // 定义选中状态的样式
  stateStyles: {
    selected: {
      fill: '#f00',
      lineWidth: 2,
      stroke: '#f00',
    },
  },
});

这样，当用户点击节点时，节点就会被高亮显示为红色，并且周围会出现一个粗细为2的红色边框。