echart堆积条形图可以从数组中循环取出多组数据吗
时间: 2023-10-05 10:05:27 浏览: 113
MATLAB中3D条形图的绘制技巧与应用
是的,ECharts 堆积条形图可以从数组中循环取出多组数据。在 ECharts 中,可以通过配置 `series` 中的 `data` 属性来设置数据。
如果要从数组中循环取出多组数据,可以使用 JavaScript 的循环语句来遍历数组,并将遍历过程中得到的数据存储在一个新的数组中,最后在 `series` 中使用该数组。
例如,我们有一个多维数据数组 `data`,其中包含多组数据,我们想要使用它来设置堆叠条形图的数据。我们可以使用以下代码来循环遍历数组并将数据存储在一个新的数组 `stackData` 中:
```javascript
const data = [
[120, 132, 101, 134, 90],
[220, 182, 191, 234, 290],
[320, 332, 301, 334, 390]
];
const stackData = [];
for (let i = 0; i < data.length; i++) {
const seriesData = [];
for (let j = 0; j < data[i].length; j++) {
seriesData.push({
value: data[i][j],
itemStyle: {
color: ['red', 'blue', 'green'][i] // 可以设置每个数据项的样式
}
});
}
stackData.push({
name: `Series ${i+1}`,
type: 'bar',
stack: 'stack1',
data: seriesData
});
}
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: stackData
};
```
在上面的代码中,我们使用两层 `for` 循环遍历了 `data` 数组,并将每组数据项存储在了 `seriesData` 数组中。我们还可以在存储数据时设置每个数据项的样式,这里设置了每组数据的颜色分别为红、蓝、绿。最后,在外层 `for` 循环中,我们将每组数据存储在了 `stackData` 数组中,并在 `series` 中使用 `stackData` 数组作为数据。
阅读全文