echarts 柱状图中如何遍历dataset 属性对应的柱子
时间: 2024-02-08 18:42:13 浏览: 159
ECharts柱状图-最简单的数据集(dataset).zip
在 ECharts 中,可以通过 `series` 的 `data` 属性来设置数据源,而如果需要对数据进行遍历,可以使用 `echarts.util.each` 方法对数据进行遍历操作。具体来说,可以按照以下步骤进行操作:
1. 在 `option` 中设置 `dataset` 属性,指定数据源,例如:
```js
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
```
2. 在 `series` 中设置 `type` 为 `'bar'`,并设置 `data` 属性为数据源中的某一列,例如:
```js
series: [
{
type: 'bar',
data: dataset.source[0].slice(1) // 取数据源中的第一行,从第二列开始
}
]
```
3. 使用 `echarts.util.each` 方法对数据进行遍历,例如:
```js
echarts.util.each(dataset.source, function (rowData, dataIndex) {
console.log('第' + dataIndex + '行数据:');
echarts.util.each(rowData, function (cellData, cellIndex) {
console.log('第' + cellIndex + '列数据:' + cellData);
});
});
```
这样就可以遍历 `dataset` 属性对应的柱子了。
阅读全文