如何用不同格式的Dataset在Apache ECharts生成相同图表？

原Apache ECharts示例使用二维数组格式的Dataset生成图表：

source: [
    ['product', '2012', '2013', '2014', '2015'],
    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
    ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]

现有对象数组格式的Dataset：

source: [
    {'product': 'Matcha Latte', 'year': '2012', 'value': 41.1},
    {'product': 'Matcha Latte', 'year': '2013', 'value': 30.4},
    {'product': 'Matcha Latte', 'year': '2014', 'value': 65.1},
    {'product': 'Matcha Latte', 'year': '2015', 'value': 53.3},
    {'product': 'Milk Tea', 'year': '2012', 'value': 86.5},
    {'product': 'Milk Tea', 'year': '2013', 'value': 92.1},
    {'product': 'Milk Tea', 'year': '2014', 'value': 85.7},
    {'product': 'Milk Tea', 'year': '2015', 'value': 83.1},
    {'product': 'Cheese Cocoa', 'year': '2012', 'value': 24.1},
    {'product': 'Cheese Cocoa', 'year': '2013', 'value': 67.2},
    {'product': 'Cheese Cocoa', 'year': '2014', 'value': 79.5},
    {'product': 'Cheese Cocoa', 'year': '2015', 'value': 86.4}
]

要求不转换为二维数组，直接用ECharts原生配置生成与示例一致的两张图表。

ECharts支持直接基于对象数组格式的Dataset配置图表，核心是通过dataset的维度定义、series的encode属性，或dataset.transform能力实现字段映射与数据筛选，无需手动转换数据结构。

1. 分组柱状图 #

通过series.encode的dataFilter筛选对应年份的数据，配合维度定义完成映射：

option = {
    dataset: {
        source: [
            {'product': 'Matcha Latte', 'year': '2012', 'value': 41.1},
            {'product': 'Matcha Latte', 'year': '2013', 'value': 30.4},
            {'product': 'Matcha Latte', 'year': '2014', 'value': 65.1},
            {'product': 'Matcha Latte', 'year': '2015', 'value': 53.3},
            {'product': 'Milk Tea', 'year': '2012', 'value': 86.5},
            {'product': 'Milk Tea', 'year': '2013', 'value': 92.1},
            {'product': 'Milk Tea', 'year': '2014', 'value': 85.7},
            {'product': 'Milk Tea', 'year': '2015', 'value': 83.1},
            {'product': 'Cheese Cocoa', 'year': '2012', 'value': 24.1},
            {'product': 'Cheese Cocoa', 'year': '2013', 'value': 67.2},
            {'product': 'Cheese Cocoa', 'year': '2014', 'value': 79.5},
            {'product': 'Cheese Cocoa', 'year': '2015', 'value': 86.4}
        ],
        dimensions: [
            {name: 'product'},
            {name: 'year'},
            {name: 'value'}
        ]
    },
    legend: {},
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '2012',
            encode: {
                x: 'product',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'year') === '2012';
                }
            }
        },
        {
            type: 'bar',
            name: '2013',
            encode: {
                x: 'product',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'year') === '2013';
                }
            }
        },
        {
            type: 'bar',
            name: '2014',
            encode: {
                x: 'product',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'year') === '2014';
                }
            }
        },
        {
            type: 'bar',
            name: '2015',
            encode: {
                x: 'product',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'year') === '2015';
                }
            }
        }
    ]
};

2. 多系列折线图 #

利用dataset.transform的分组聚合能力，在ECharts内部转换数据结构，再配置系列映射：

option = {
    dataset: {
        source: [
            {'product': 'Matcha Latte', 'year': '2012', 'value': 41.1},
            {'product': 'Matcha Latte', 'year': '2013', 'value': 30.4},
            {'product': 'Matcha Latte', 'year': '2014', 'value': 65.1},
            {'product': 'Matcha Latte', 'year': '2015', 'value': 53.3},
            {'product': 'Milk Tea', 'year': '2012', 'value': 86.5},
            {'product': 'Milk Tea', 'year': '2013', 'value': 92.1},
            {'product': 'Milk Tea', 'year': '2014', 'value': 85.7},
            {'product': 'Milk Tea', 'year': '2015', 'value': 83.1},
            {'product': 'Cheese Cocoa', 'year': '2012', 'value': 24.1},
            {'product': 'Cheese Cocoa', 'year': '2013', 'value': 67.2},
            {'product': 'Cheese Cocoa', 'year': '2014', 'value': 79.5},
            {'product': 'Cheese Cocoa', 'year': '2015', 'value': 86.4}
        ],
        transform: {
            type: 'group',
            groupBy: 'product',
            aggregator: {
                '2012': data => data.find(item => item.year === '2012').value,
                '2013': data => data.find(item => item.year === '2013').value,
                '2014': data => data.find(item => item.year === '2014').value,
                '2015': data => data.find(item => item.year === '2015').value
            }
        }
    },
    legend: {},
    xAxis: {type: 'category', data: ['2012', '2013', '2014', '2015']},
    yAxis: {},
    series: [
        {
            type: 'line',
            name: 'Matcha Latte',
            encode: {
                x: 'year',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'product') === 'Matcha Latte';
                }
            }
        },
        {
            type: 'line',
            name: 'Milk Tea',
            encode: {
                x: 'year',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'product') === 'Milk Tea';
                }
            }
        },
        {
            type: 'line',
            name: 'Cheese Cocoa',
            encode: {
                x: 'year',
                y: 'value',
                dataFilter: function(dataIndex) {
                    return this.dataset.get(dataIndex, 'product') === 'Cheese Cocoa';
                }
            }
        }
    ]
};

关键配置说明 #

• 维度定义：dataset.dimensions明确对象数组中的字段名称，让ECharts准确识别数据结构。
• encode映射：series.encode指定x、y轴对应的字段，dataFilter函数筛选出当前系列需要的数据。
• transform聚合：dataset.transform的分组聚合功能，在ECharts内部完成数据结构转换，避免手动处理数组。

内容的提问来源于stack exchange，提问作者Bueller