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);
    });

這項工作完美......任何人都可以看到更好或更清潔的方式來獲取相同的信息嗎？

謝謝，