如何在动态图表中展示聚类条形图并实现数据动态化？

没问题，这就帮你搞定图表数据动态化的需求！下面是针对你场景的完整解决方案：

你当前的代码已经在做基础的数据映射，但还需要补上图表配置的动态适配（毕竟子类别数量是3-4个不固定的，光处理数据还不够，得让图表的系列、图例等配置也跟着数据走）。

1. 完善数据动态处理逻辑 #

先把你提供的代码补全并优化，确保能自动生成所有子类别对应的字段：

// 假设resultx是后端返回的原始数据，结构示例：
// [
//   { category: "主类别A", data: [{ subcategory: "子类1", value: 15 }, { subcategory: "子类2", value: 25 }, ...] },
//   { category: "主类别B", data: [...] }
// ]

var processedChartData = resultx.map(function(rawDataElement) {
  var newDataElement = { "category": rawDataElement.category };
  // 遍历每个子类别，动态生成valueN和subcategoryN字段
  rawDataElement.data.forEach(function(nestedElement, index) {
    newDataElement["value" + (index + 1)] = nestedElement.value; // 让字段从value1开始，更直观
    newDataElement["subcategory" + (index + 1)] = nestedElement.subcategory;
  });
  return newDataElement;
});

这段代码会自动根据每个主类别下的子类别数量，生成对应的value1/subcategory1、value2/subcategory2等字段，完全不用手动修改。

2. 动态生成图表配置（以ECharts为例） #

如果用ECharts、Highcharts这类主流图表库，还需要让图表的系列、图例、轴标签等配置也动态适配子类别数量：

// 第一步：提取所有唯一的子类别名称（作为图例和系列名称）
var allSubcategories = [];
resultx.forEach(function(item) {
  item.data.forEach(function(subItem) {
    if (!allSubcategories.includes(subItem.subcategory)) {
      allSubcategories.push(subItem.subcategory);
    }
  });
});

// 第二步：动态生成图表系列配置
var series = allSubcategories.map(function(subCat, index) {
  return {
    name: subCat,
    type: 'bar', // 可根据需求改成line/pie等
    data: processedChartData.map(function(item) {
      return item["value" + (index + 1)] || 0; // 容错：没有对应值时填0，避免图表报错
    })
  };
});

// 第三步：组装最终的图表配置
var option = {
  title: { text: '动态子类别统计图表' },
  tooltip: { trigger: 'axis' },
  legend: { data: allSubcategories }, // 动态生成图例
  xAxis: {
    type: 'category',
    data: processedChartData.map(function(item) { return item.category; }) // 动态生成X轴标签
  },
  yAxis: { type: 'value' },
  series: series // 动态生成系列
};

// 渲染图表
var myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);

3. 关键注意点 #

• 容错处理：如果某个主类别下缺少某个子类别的数据，一定要给默认值（比如0），避免图表渲染出错
• 字段对应关系：确保valueN和subcategoryN的索引和子类别顺序完全对应，别搞混
• 多图表库适配：不同图表库的配置语法略有差异，但核心思路都是从原始数据中提取动态配置项，再自动生成对应配置

这样不管resultx返回3个还是4个子类别，代码都能自动适配，再也不用手动修改啦！

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