如何为ECharts柱状图的柱子添加页面跳转点击事件？

问题说明 #

已成功加载ECharts柱状图且功能运行正常，但无法实现点击柱状图的柱子跳转到alert页面的功能。仅图表下方的普通HTML链接点击有效，希望实现点击柱状图柱子即可跳转。

解决方案 #

要实现柱子点击跳转，需要通过ECharts的事件监听系统绑定点击事件，具体修改如下：

修改chart.component.ts代码 #

在图表初始化完成后，添加click事件监听，获取点击的柱子数据后调用Angular Router跳转：

// ... 原有代码保持不变 ...

option && myChart.setOption(option);

// 添加以下代码：监听柱子点击事件
myChart.on('click', (params) => {
  // 判断点击的是柱子（series类型为bar）
  if (params.seriesType === 'bar') {
    // 获取点击的系列名称，比如"Direct"、"Mail Ad"等
    const seriesName = params.seriesName;
    // 使用Angular Router跳转到alert页面，携带系列名称参数
    this.router.navigate(['/alert', seriesName]);
  }
});

// ... 原有代码保持不变 ...

完整修改后的关键代码片段 #

ngOnInit(): void {
  // ... 原有初始化代码 ...

  option && myChart.setOption(option);

  // 新增：监听柱状图点击事件
  myChart.on('click', (params) => {
    if (params.seriesType === 'bar') {
      const seriesName = params.seriesName;
      this.router.navigate(['/alert', seriesName]);
    }
  });
}

原理说明 #

ECharts的图表元素（比如柱子、折线点）点击事件不会自动触发DOM的点击事件，必须通过ECharts实例提供的on方法来绑定事件监听。通过params参数可以获取点击元素的系列名称、数据值等信息，再结合Angular的Router服务即可实现页面跳转。

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