Apache ECharts动态系列映射问题：实现设备版本堆叠柱状图遇阻

你的核心问题是生成series时没有严格对齐x轴设备类目的顺序，下面是最简实现方式，只需要3步就能生成符合要求的配置：

完整可运行代码 #

var data = [
  {
    "key": {
      "field1": "Device 1",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 2",
      "field2": "Unknown"
    },
    "doc_count": 4
  },
  {
    "key": {
      "field1": "Device 3",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.0"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.1"
    },
    "doc_count": 138
  }
]

// 步骤1：提取x轴类目（所有设备）和堆叠系列（所有版本）
const xAxisData = Array.from(new Set(data.map(item => item.key.field1)))
const versionList = Array.from(new Set(data.map(item => item.key.field2)))

// 步骤2：构造 设备-版本 数值映射表，方便快速查找
const valueMap = {}
data.forEach(item => {
  const device = item.key.field1
  const version = item.key.field2
  if (!valueMap[device]) valueMap[device] = {}
  valueMap[device][version] = item.doc_count
})

// 步骤3：生成ECharts需要的series配置
const series = versionList.map(version => {
  return {
    name: version,
    type: 'bar',
    stack: 'total',
    // 严格按照x轴设备顺序填充数值，不存在的版本填0
    data: xAxisData.map(device => valueMap[device]?.[version] || 0)
  }
})

// 最终ECharts配置
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: xAxisData
  },
  yAxis: {
    type: 'value'
  },
  series: series
}

实现说明 #

• 不需要对原始数据做提前排序，映射表会自动匹配对应数值
• 每个版本的data数组严格和x轴的设备顺序一一对应，不存在的版本自动补0，完全符合ECharts的堆叠柱状图数据规则
• 后续如果新增设备或者版本，代码不需要修改，自动适配新数据

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