echarts桑基图

Question

vue2 桑基图点击子节点， click事件不触发，有什么方法能触发，或者替代点击事件吗

Answer 1

1. 确保事件绑定时机（结合 Vue 生命周期）
   在 Vue2 中，需确保 ECharts 图表完全渲染后再绑定事件。可通过 this.$nextTick 延迟执行事件绑定逻辑：

// 在 mounted 或更新图表的方法中
this.chartInstance.setOption(option, true);
this.$nextTick(() => {
  this.chartInstance.off('click'); // 先解除旧事件，避免重复绑定
  this.chartInstance.on('click', (e) => {
    console.log('桑基图点击事件详情', e);
    // 判断是否为桑基图子节点点击
    if (e.componentType === 'sankey' && e.seriesType === 'sankey') {
      console.log('子节点名称：', e.name);
      console.log('子节点值：', e.value);
      // 这里写你的业务逻辑
    }
  });
});

1. 完善桑基图交互配置（让节点 “可点击”）
   在 ECharts 配置项中，需为桑基图的节点和链接配置可交互样式（如 itemStyle、emphasis），确保 ECharts 识别为可点击元素：

option = {
  sankey: {
    node: {
      itemStyle: {
        opacity: 0.8, // 节点默认透明度（确保可见可交互）
        borderWidth: 1
      },
      emphasis: {
        focus: 'self', // 悬浮时聚焦自身，强化交互感知
        itemStyle: {
          opacity: 1 // 悬浮时完全显示
        }
      }
    },
    link: {
      itemStyle: {
        opacity: 0.5 // 链接默认透明度
      },
      emphasis: {
        itemStyle: {
          opacity: 0.8 // 悬浮时链接高亮
        }
      }
    },
    // 其他配置（如数据、布局等）
  }
};