ECharts 数据集（dataset）详解
ECharts 从 4.0 开始引入 dataset 组件，用于统一管理数据源，实现数据与图表配置分离。这极大提升了代码可维护性，尤其适合：
- 多系列图表共享同一数据源
- 动态切换数据源
- 数据转换（transform，如聚合、过滤）
- 与现代框架（如 Vue/React）结合使用
1. 基本使用：分离数据与系列
传统方式数据写在 series.data 中，dataset 方式将数据集中到 dataset.source。
示例：折线图使用 dataset
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ECharts dataset 示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script>
const myChart = echarts.init(document.getElementById('main'));
const option = {
title: { text: '使用 dataset 的多系列折线图' },
tooltip: { trigger: 'axis' },
legend: { data: ['邮件营销', '联盟广告', '视频广告'] },
dataset: {
source: [
['产品', '邮件营销', '联盟广告', '视频广告'],
['衬衫', 120, 80, 150],
['毛衣', 90, 100, 120],
['裤子', 150, 60, 180],
['鞋子', 80, 120, 90]
]
},
xAxis: { type: 'category' },
yAxis: { type: 'value' },
series: [
{ type: 'line', encode: { x: '产品', y: '邮件营销' } },
{ type: 'line', encode: { x: '产品', y: '联盟广告' } },
{ type: 'line', encode: { x: '产品', y: '视频广告' } }
]
};
myChart.setOption(option);
</script>
</body>
</html>关键点：
source支持二维数组（第一行可作为 dimensions 表头）或对象数组。series.encode指定维度映射（x/y/value 等），避免硬编码索引。
2. 多 dataset 与 sourceIndex
可以定义多个 dataset，series 通过 datasetIndex 或 sourceIndex 指定数据源。
dataset: [
{ source: [...] }, // index 0
{ source: [...] } // index 1
],
series: [{ datasetIndex: 1, ... }]3. 数据转换（transform）——强大功能
ECharts 5+ 支持内置 transform，如 filter、aggregate、sort 等。
示例：聚合统计
dataset: [
{
source: [ /* 原始数据 */ ]
},
{
id: 'aggregated',
fromDatasetId: 'raw',
transform: {
type: 'aggregate',
config: {
groupBy: 'category',
fields: [{ field: 'value', method: 'sum', as: 'total' }]
}
}
}
],
series: [{ datasetId: 'aggregated', ... }]4. 异步加载与 dataset
结合异步数据非常方便：
fetch('/data.json')
.then(res => res.json())
.then(data => {
myChart.setOption({
dataset: { source: data }
});
});优势总结
- 解耦：数据变更只需更新 dataset，系列配置不变。
- 复用：多个图表共享同一 dataset。
- 灵活：支持 dimensions 命名、encode 映射、transform 管道。
- 性能：大数据时更高效（ECharts 内部优化）。
官方文档（强烈推荐）：
- dataset 手册：https://echarts.apache.org/handbook/zh/concepts/dataset/
- 示例：https://echarts.apache.org/examples/zh/#chart-type-line （搜索 dataset）
如果你需要对象数组格式、transform 具体示例，或在 Vue/React 中的使用方式，告诉我，我可以给出完整代码！
