ECharts多维柱状图如何实现同类别多指标并排对比？

Question

常见问题： 在ECharts中实现“同类别多指标并排对比”（如某城市同时展示GDP、人口、PM2.5三项指标的柱状图），常误用`series.type: 'bar'`单系列叠加，导致指标堆叠而非并排；或错误将多指标置于同一`series.data`数组，引发维度错位。正确做法需结合`dataset`声明多维数据源，并通过`encode`精准映射`x`（类别）、`y`（多个指标列）及`seriesLayoutBy: 'row'`或`'column'`控制布局方向；若手动构造series，则必须为每个指标定义独立series项，统一`name`与`xAxis`，并设置`barWidth`和`barGap`避免重叠。此外，启用`legend`时需确保`series.name`可识别，且`tooltip.formatter`需适配多字段动态取值——否则易出现数据错位、图例失效或提示信息缺失等问题。

Answer 1

```html

一、现象层：典型错误行为与直观症状

• ❌ 将 GDP、人口、PM2.5 三个指标硬塞进单个 series.data = [[1200, 850, 32], [1350, 872, 28], ...] —— 导致 ECharts 默认按「堆叠柱状图」渲染；
• ❌ 忽略 seriesLayoutBy，在 dataset 模式下未声明布局方向，使多列 y 值被错误映射为同一柱子的高度；
• ❌ 手动构造 series 时未统一 xAxisIndex 或遗漏 name，导致图例不显示或点击无效；
• ❌ tooltip 使用静态字符串 formatter: '{a0}: {c}'，无法区分当前悬停的是 GDP 还是 PM2.5；
• ❌ barWidth 设置过大（如 barWidth: 40）且未配 barGap: '-100%'，造成视觉重叠而非并排。

二、机制层：ECharts 渲染逻辑与数据流解析

ECharts 的柱状图并排本质依赖两个正交控制维度：

1. 数据组织维度：dataset 中每行代表一个「类别」（如城市），每列代表一个「指标」（GDP/人口/PM2.5）；
2. 系列映射维度：通过 encode: { x: 'city', y: 'gdp' } 显式绑定字段，或借助 seriesLayoutBy: 'column' 自动将每列生成独立 series。

若未显式声明 encode 或 layout 策略，ECharts 会退化为「单维序列推断」——即把数组第一项当 x，其余当 y 堆叠值。

三、方案层：双路径实现范式对比

维度	Dataset + encode 方案	手动 series 构造方案
可维护性	✅ 数据与配置分离，新增指标仅改 dataset 列 + encode	⚠️ 每增一指标需复制整个 series 配置块
性能（>10k 类别）	✅ dataset 内部做列式优化，内存占用低	⚠️ 多 series 导致 option 体积膨胀，初始化慢
Tooltip 动态取值	✅ tooltip.formatter 可用 {value.gdp}、{value.pm25}	✅ 需在每个 series 中单独写 formatter，易不一致

四、代码层：生产就绪级实现示例

// ✅ Dataset + encode 推荐方案（支持任意 N 指标）
const option = {
  dataset: {
    source: [
      { city: '北京', gdp: 40269, population: 2189, pm25: 38 },
      { city: '上海', gdp: 43214, population: 2487, pm25: 29 },
      { city: '广州', gdp: 28232, population: 1874, pm25: 33 },
      { city: '深圳', gdp: 32388, population: 1768, pm25: 25 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [
    { type: 'bar', encode: { x: 'city', y: 'gdp' }, name: 'GDP（亿元）' },
    { type: 'bar', encode: { x: 'city', y: 'population' }, name: '常住人口（万人）' },
    { type: 'bar', encode: { x: 'city', y: 'pm25' }, name: 'PM2.5 年均值（μg/m³）' }
  ],
  legend: { show: true },
  tooltip: {
    trigger: 'axis',
    formatter: params => {
      const p = params[0];
      return `${p.name}

        ${p.seriesName}: ${p.value}

        ${params[1]?.seriesName}: ${params[1]?.value}

        ${params[2]?.seriesName}: ${params[2]?.value}`;
    }
  }
};

五、诊断层：问题定位决策树

graph TD
  A[柱子未并排？] --> B{检查 seriesLayoutBy}
  B -->|缺失或错误| C[强制添加 seriesLayoutBy: 'column']
  B -->|存在| D[检查 encode.x 是否指向同一字段]
  A --> E{是否有多 series？}
  E -->|否| F[立即拆分为多个 series]
  E -->|是| G[验证所有 series 的 xAxisIndex 是否一致]
  G --> H[检查 barGap/barCategoryGap 是否为负值]

六、进阶层：动态指标与主题适配技巧

• 💡 支持运行时切换指标：用 dataset.source 替换 + chart.setOption(option, { notMerge: true })；
• 💡 指标单位差异化：在 series.name 后追加单位，并在 tooltip 中用 params[0].value + '亿元' 动态拼接；
• 💡 暗色主题兼容：为不同指标设置专属 color 数组，避免自动 palette 冲突；
• 💡 移动端适配：启用 grid: { containLabel: true } 防止长城市名截断；
• 💡 无障碍增强：为每个 series 添加 aria: { description: '北京市2023年GDP为40269亿元' }。

七、反模式警示：5个高危操作

1. 在 dataset 模式下仍手动写 series.data —— 触发数据源冲突警告；
2. 使用 stack: 'group' 试图模拟并排 —— 实际仍为堆叠，且 tooltip 不支持跨 stack 聚合；
3. 将字符串型数值（如 '40269'）传入 dataset —— 导致 yAxis 自动识别为类目轴；
4. 在 formatter 中直接访问 params[0].value[1] —— dataset 模式下 value 是对象而非数组；
5. 忽略 animation: false 在大数据量初始化时的卡顿风险。

```