Apache Echarts 动态系列映射

Question

我正在尝试在 apache echarts 中为版本条形图做一个堆叠设备，但失败了。我来自另一个库，您只需提供分组名称，它是自动的，所以 echarts 专门输入系列、标签等. 对我来说是新的。

我一直使用echartsdemo 作为一个点来玩它，并将我的数据添加到顶部。

您似乎需要将系列数据与类别的顺序相匹配，但它总是对我不起作用..

这是我一直在尝试的代码：

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
  }
]
var labels = Array.from(new Set(data.map((item) => item.key.field1)));
var series = Array.from(new Set(data.map((item) => item.key.field2)));

var seriesData = [];
data.forEach(version => { 
var added = false;

seriesData.forEach(iSeries => { 
if (iSeries.label == version.key.field2){
added = true;

if (!iSeries["added"].includes(version.key.field1)){
    iSeries["added"].push(version.key.field1);
    iSeries.data.push(version.doc_count);
}
else{
  iSeries.data.push(0);
}
}else{
     iSeries.data.push(0);
}
});

if (!added) {
 var newSeries = {
                  label:version.key.field2,
                  data:[version.doc_count],
                  added:[version.key.field1]
                  }
seriesData.push(newSeries);
}
});

console.log(seriesData);

const chartData = series.map((uniqueSrc) => {
      return {
        label: uniqueSrc,
        data: data.map((obj) => {
          if (obj.key.field1 == uniqueSrc) {
        
            return obj.doc_count;
          } else {
            return 0;
          }
        }),
      };
    });



data.forEach((device) => {


})


option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: labels
  },
  yAxis: {
    type: 'value'
  },
  series: seriesData.map((obj, index) => {
        return {
          name: obj.label,

          type: 'bar', stack: 'total',
          data: obj.data
        };
      })
};

也许有更简单的方法？我的数据也可以按 field1 或 field2 排序，但我尝试了两种方式，但什么都没有。

感谢任何帮助或见解。

Answer 1

我得到了它的工作，但它似乎有点乱。我更改了数据源（将设备（类别）嵌套在版本（系列）中）：

var data = [
  {
    key: '1.6.1',
    doc_count: 138,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 138
        }
      ]
    }
  },
  {
    key: 'Unknown',
    doc_count: 6,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 2',
          doc_count: 4
        },
        {
          key: 'Device 3',
          doc_count: 1
        },
        {
          key: 'Device 4',
          doc_count: 1
        }
      ]
    }
  },
  {
    key: '1.6.0',
    doc_count: 1,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 1
        }
      ]
    }
  }
];

   var categories = [];
    this.deviceVersionChartData.forEach((version) => {
      version['sterms#deviceType'].buckets.forEach((category) => {
        if (!categories.includes(category.key)) {
          categories.push(category.key);
        }
      });
    });

    var seriesData = [];
    this.deviceVersionChartData.forEach((version) => {
      var counts = [];
      var firstRun = true;
      version['sterms#deviceType'].buckets.forEach((category) => {

        categories.forEach((cat) => {
          if (cat == category.key) {
            counts.push(category.doc_count);
          } else {
            if (firstRun) {
              counts.push(0);
            }

          }
          firstRun = false;
        });
      });

      var newSeries = {
        label: version.key,
        data: counts
      };
      seriesData.push(newSeries);
    });

这很有效...谁能找到更好或更清洁的方法来获得相同的结果？

谢谢，