ECharts 数据集（dataset）

ECharts 的 dataset 允许使用结构化数据管理图表数据，使数据与视觉配置解耦，适用于 多个系列共用同一数据源、数据转换、数据过滤等 场景。

1. 基本使用

dataset 允许数据和图表配置分离：

var option = {
    dataset: {
        source: [
            ['产品', '销量'],
            ['苹果', 100],
            ['香蕉', 200],
            ['橙子', 150]
        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }]
};
chart.setOption(option);

📌 说明

  • source：数据源，第一行为字段名，后续为数据
  • xAxis.type = 'category' 自动匹配第一列
  • series 直接引用 dataset 数据

2. 多个系列共享数据

如果多个系列共用同一数据源，可以使用 encode 指定数据对应关系：

var option = {
    dataset: {
        source: [
            ['产品', '销量', '库存'],
            ['苹果', 100, 50],
            ['香蕉', 200, 80],
            ['橙子', 150, 60]
        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [
        { type: 'bar', encode: { x: '产品', y: '销量' } },
        { type: 'bar', encode: { x: '产品', y: '库存' } }
    ]
};

📌 说明

  • encode：
    • x: '产品'：X 轴使用 产品
    • y: '销量' 和 y: '库存'：Y 轴分别使用 销量、库存
  • series 复用了 dataset 数据

3. 使用数据索引

数据也可以按索引指定：

series: [
    { type: 'bar', encode: { x: 0, y: 1 } }, // 第一列为 X 轴，第二列为 Y 轴
    { type: 'bar', encode: { x: 0, y: 2 } }  // 第一列为 X 轴，第三列为 Y 轴
]

4. 多个数据集

dataset 可以定义多个数据集，series 选择不同数据：

var option = {
    dataset: [
        { id: 'dataset1', source: [['产品', '销量'], ['苹果', 100], ['香蕉', 200]] },
        { id: 'dataset2', source: [['产品', '库存'], ['苹果', 50], ['香蕉', 80]] }
    ],
    xAxis: { type: 'category' },
    yAxis: {},
    series: [
        { type: 'bar', datasetId: 'dataset1', encode: { x: '产品', y: '销量' } },
        { type: 'bar', datasetId: 'dataset2', encode: { x: '产品', y: '库存' } }
    ]
};

📌 说明

  • datasetId 指定系列使用哪个数据集

5. 数据转换（过滤、排序等）

5.1 数据过滤

筛选 销量 > 100 的数据：

var option = {
    dataset: [
        { id: 'original', source: [['产品', '销量'], ['苹果', 100], ['香蕉', 200], ['橙子', 80]] },
        { id: 'filtered', fromDatasetId: 'original', transform: { type: 'filter', config: { dimension: '销量', gte: 100 } } }
    ],
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar', datasetId: 'filtered', encode: { x: '产品', y: '销量' } }]
};

📌 说明

  • fromDatasetId: 'original'：基于 original 数据集
  • transform: { type: 'filter', config: { dimension: '销量', gte: 100 } }
    • 过滤 销量 >= 100 的数据

5.2 数据排序

按销量降序排序：

var option = {
    dataset: [
        { id: 'original', source: [['产品', '销量'], ['苹果', 100], ['香蕉', 200], ['橙子', 80]] },
        { id: 'sorted', fromDatasetId: 'original', transform: { type: 'sort', config: { dimension: '销量', order: 'desc' } } }
    ],
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar', datasetId: 'sorted', encode: { x: '产品', y: '销量' } }]
};

📌 说明

  • transform: { type: 'sort', config: { dimension: '销量', order: 'desc' } }
    • 按 销量 降序排序

6. 动态更新数据

6.1 修改 dataset.source

setTimeout(() => {
    chart.setOption({
        dataset: {
            source: [
                ['产品', '销量'],
                ['苹果', 150],
                ['香蕉', 250],
                ['橙子', 120]
            ]
        }
    });
}, 3000); // 3 秒后更新数据

6.2 异步加载数据

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        chart.setOption({
            dataset: { source: data }
        });
    });

7. 数据格式转换

有时数据格式不同，需要转换：

7.1 服务器返回对象数组

[
    { "产品": "苹果", "销量": 100 },
    { "产品": "香蕉", "销量": 200 }
]

转换为 dataset 格式：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        var transformedData = [['产品', '销量']];
        data.forEach(item => transformedData.push([item.产品, item.销量]));
        chart.setOption({ dataset: { source: transformedData } });
    });

8. 数据集适用场景

场景适用情况
多个系列共享数据适用于 折线图、柱状图、饼图 共享相同数据
动态更新数据适用于 异步加载数据 场景
数据筛选与转换适用于 数据过滤、排序
数据解耦适用于 前端逻辑清晰，数据独立管理

🚀 你想要实现哪种数据集处理方式？