Echarts分组柱状图需求：仅展示宏级图例，关联系列与统一提示框

核心思路 #

针对需求，通过同宏系列绑定分组ID、堆叠配置、自定义图例与提示框即可实现，以下是分步落地方案：

1. 堆叠配置与X轴绑定 #

• X轴直接绑定数据源的month字段；
• 每个宏分类（如Direct、ADV）对应两个系列：orders和carts，将这两个系列的stack属性设为同一个宏名称，实现同组内的堆叠效果；
• 因orders数值始终小于carts，可让orders作为底层系列，carts以上层差值形式堆叠（用carts - orders计算上层数据，最终总高度等于carts数值）。

2. 图例分组控制 #

• 图例仅展示宏分类名称，将同宏下的orders和carts系列设置相同的groupId；
• 利用legend.selected初始化显示状态，点击图例时，同groupId的两个系列会同时显示/隐藏，legendHoverLink: false避免单个系列与图例的冲突。

3. 提示框展示全量数据 #

• 设置tooltip.trigger = 'axis'，确保鼠标悬停时展示对应月份的所有宏数据；
• 自定义tooltip.formatter，将数据按宏分类整理，清晰展示每个宏的orders和carts数值。

4. 颜色区分堆叠项 #

• 为同宏的两个系列设置同色系颜色，比如给carts系列添加半透明效果，直观区分堆叠层级。

完整代码示例 #

// 模拟匹配需求的数据源
const sourceData = [
  { month: '1月', Direct_carts: 120, Direct_orders: 90, ADV_carts: 200, ADV_orders: 150 },
  { month: '2月', Direct_carts: 150, Direct_orders: 110, ADV_carts: 230, ADV_orders: 180 },
  { month: '3月', Direct_carts: 180, Direct_orders: 130, ADV_carts: 250, ADV_orders: 200 },
];

// 提取X轴月份数据
const xAxisData = sourceData.map(item => item.month);

// 定义宏分类与对应基础色
const categories = [
  { name: 'Direct', color: '#5470c6' },
  { name: 'ADV', color: '#91cc75' }
];

// 生成系列配置
const series = [];
categories.forEach(cat => {
  // 底层orders系列
  series.push({
    name: `${cat.name}_orders`,
    type: 'bar',
    stack: cat.name,
    groupId: cat.name,
    legendHoverLink: false,
    itemStyle: { color: cat.color },
    data: sourceData.map(item => item[`${cat.name}_orders`])
  });
  // 上层carts差值系列（半透明）
  series.push({
    name: `${cat.name}_carts`,
    type: 'bar',
    stack: cat.name,
    groupId: cat.name,
    legendHoverLink: false,
    itemStyle: { color: `${cat.color}80` }, // 80为透明度值
    data: sourceData.map(item => item[`${cat.name}_carts`] - item[`${cat.name}_orders`])
  });
});

// 初始化图表实例
const myChart = echarts.init(document.getElementById('main'));

// 最终配置项
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    formatter: params => {
      let result = `${params[0].axisValue}<br/>`;
      const categoryMap = {};
      // 按宏分类整理数据
      params.forEach(item => {
        const [cat, type] = item.name.split('_');
        if (!categoryMap[cat]) categoryMap[cat] = {};
        categoryMap[cat][type] = type === 'carts' ? item.value + categoryMap[cat].orders : item.value;
      });
      // 格式化展示
      Object.keys(categoryMap).forEach(cat => {
        result += `${cat}:<br/>`;
        result += `  订单数：${categoryMap[cat].orders}<br/>`;
        result += `  购物车数：${categoryMap[cat].carts}<br/>`;
      });
      return result;
    }
  },
  legend: {
    data: categories.map(cat => cat.name),
    selected: categories.reduce((obj, cat) => {
      obj[cat.name] = true;
      return obj;
    }, {})
  },
  xAxis: { type: 'category', data: xAxisData },
  yAxis: { type: 'value' },
  series: series
};

// 渲染图表
myChart.setOption(option);

关键说明 #

• 上层carts系列用差值计算，是因为ECharts的堆叠为累加模式，这样最终总高度等于原始carts数值；
• groupId是实现图例批量控制的核心，确保点击宏分类时，对应的两个堆叠系列同步显示/隐藏；
• 提示框的自定义格式化逻辑，解决了默认展示分散数据的问题，让同宏数据聚合展示。

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