ECharts树图点击边时如何跳转打开对应URL？

默认Echarts Tree树图未开启边的交互事件触发能力，按以下步骤配置即可实现点击边打开指定URL的功能：

1. 开启边的事件触发开关 #

在tree系列的配置中添加triggerLineEvent: true，同时在边的配置中自定义字段存储对应跳转URL：

const option = {
  // 其他全局配置（tooltip、title等）
  series: [
    {
      type: 'tree',
      data: [/* 你的树节点数据 */],
      // 核心配置：开启边的点击事件触发
      triggerLineEvent: true,
      // 配置边的关联信息，可手动指定，也可通过Echarts自动生成后挂载自定义字段
      edges: [
        {
          source: '父节点标识',
          target: '子节点标识',
          // 自定义字段存储该边对应的跳转地址
          jumpUrl: '你要打开的URL地址'
        },
        // 其余边的配置
      ]
      // 其余tree系列配置
    }
  ]
}

2. 绑定全局点击事件监听，识别边点击动作 #

对Echarts实例绑定click事件，判断点击元素类型为边时，读取对应自定义URL字段执行跳转：

// myChart为你初始化的Echarts实例
myChart.on('click', function (eventParams) {
  // 判定点击的元素为树图的边
  if (eventParams.componentType === 'series' && eventParams.elementType === 'edge') {
    const targetUrl = eventParams.data.jumpUrl
    if (targetUrl) {
      // 新窗口打开URL，若需要当前页跳转可替换为location.href = targetUrl
      window.open(targetUrl)
    }
  }
  // 原有节点点击逻辑可保留在此处，不影响原有功能
  if (eventParams.componentType === 'series' && eventParams.elementType === 'node') {
    // 原有节点点击的业务逻辑
  }
})

注意事项 #

• triggerLineEvent属性仅支持Echarts 4.0及以上版本，若使用低版本Echarts需要先升级依赖
• 若你的树图边是Echarts根据节点层级自动生成的，未手动配置edges数组，可通过边的source、target属性匹配对应业务数据，动态获取需要跳转的URL
• 存储跳转地址的自定义字段名可根据业务需求自行修改，只要配置和读取时字段名对应即可

内容的提问来源于stack exchange，提问作者Star_fly