Apache Echarts动态系列映射
[英]Apache Echarts dynamic series mapping
问题描述
我正在尝试在 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 排序，但我尝试了两种方式，但什么都没有。
感谢您的任何帮助或见解。
1 条回复
1楼 Whitts 0 2021-11-25 16:55:45
我得到了它的工作，但它似乎有点乱。 我更改了数据源（将设备（类别）嵌套在版本（系列）中）：
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);
});
这项工作完美......任何人都可以看到更好或更清洁的方式来获取相同的信息吗？
谢谢，
问题未解决？试试以下方法：
熊猫：通过将二维字典映射到另一个序列来创建序列
[英]Pandas: Create series by mapping 2-dimensional dictionary to another series
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.