Highcharts堆叠柱状图多层Drill Down：实现从堆叠柱跳转到单柱钻取图表

我来给你梳理下具体的实现步骤，都是实际开发中能用得上的方法：

1. 精准监听目标堆叠柱的点击事件 #

首先得给堆叠柱状图绑定点击事件，核心是要准确识别出用户点击的是第二个堆叠柱的Cats系列。不同的图表库（比如ECharts、Highcharts）都有对应的点击事件回调，你可以在回调里拿到点击的点信息：

• 比如用ECharts的click事件，通过params.seriesName判断是不是Cats系列，params.name或者params.dataIndex判断是不是第二个柱体
• 如果是Highcharts，就在plotOptions.series.point.events.click里，用this.series.name和this.category做判断

2. 准备钻取后的单柱图数据 #

根据点击的Cats系列和第二个柱，整理好单柱图需要展示的细分数据。比如你可以预先定义好对应的数据集合，或者通过接口动态获取——比如点击第二个柱的Cats后，要展示不同猫品种的数量统计，那数据结构就应该是单柱状图所需的格式（x轴是品种，y轴是数量）。

3. 切换/渲染钻取后的单柱图 #

这里有两种常见实现方式：

• 同一容器替换：直接在原来的图表容器里更新配置，销毁旧图表或者覆盖配置。比如ECharts用setOption()直接传入单柱图的配置；Highcharts可以先调用chart.destroy()再重新初始化新图表
• 新容器展示：在页面的另一个区域（比如弹窗、下方区域）渲染新的单柱图，保留原来的堆叠图，这种方式适合需要同时对比数据的场景

4. 添加返回上一级的功能 #

钻取后一定要给用户返回的路径，不然体验会很差：

• 可以在单柱图的标题旁边加个返回按钮，点击后重新渲染原来的堆叠柱图配置
• 也可以监听单柱图的空白区域点击，触发返回逻辑（注意要和单柱的点击事件区分开）
• 关键是要保存好原始堆叠图的配置和数据，方便快速恢复

简单代码示例（以ECharts为例） #

// 原始堆叠柱状图配置
const stackChartOption = {
  xAxis: { type: 'category', data: ['Group 1', 'Group 2', 'Group 3'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Dogs', type: 'bar', stack: 'pets', data: [6, 4, 5] },
    { name: 'Cats', type: 'bar', stack: 'pets', data: [3, 7, 2] },
    { name: 'Others', type: 'bar', stack: 'pets', data: [2, 1, 3] }
  ]
};

// 钻取后的单柱图配置（对应Group 2的Cats）
const drillDownOption = {
  xAxis: { type: 'category', data: ['Persian', 'Siamese', 'Maine Coon'] },
  yAxis: { type: 'value' },
  series: [{ name: 'Cat Breeds', type: 'bar', data: [3, 2, 2] }],
  title: { text: 'Cat Breeds in Group 2', subtext: 'Click here to return' }
};

// 初始化图表
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);
myChart.setOption(stackChartOption);

// 绑定堆叠图的点击事件
function bindStackClick() {
  myChart.on('click', (params) => {
    // 判断是否是Group 2的Cats系列
    if (params.seriesName === 'Cats' && params.name === 'Group 2') {
      // 切换到钻取后的单柱图
      myChart.setOption(drillDownOption);
      // 绑定返回事件
      myChart.off('click');
      myChart.on('click', () => {
        myChart.setOption(stackChartOption);
        // 重新绑定堆叠图的点击事件
        myChart.off('click');
        bindStackClick();
      });
    }
  });
}

bindStackClick();

关键注意点 #

• 事件解绑要及时：切换图表后一定要解绑旧的点击事件，不然会出现重复触发的问题
• 数据关联要清晰：确保钻取的数据和点击的堆叠柱是严格对应的，避免数据错乱
• 状态管理：可以用变量保存当前的图表层级（比如currentLevel: 'stack'或'drillDown'），方便逻辑判断

内容的提问来源于stack exchange，提问作者Kees de Jager