ECharts 数据集（dataset）：让数据与图表真正“对上号”
在使用 ECharts 进行数据可视化时，你是否遇到过这样的问题：明明数据没错，图表却显示异常？或者，每次更换图表类型，都要重写一遍 series 配置，代码重复率高，维护困难？这背后，往往是因为没有用好 ECharts 的核心功能之一——数据集（dataset）。
ECharts 数据集（dataset）是 ECharts 4.0 版本引入的一项强大特性，它让数据与图表的绑定变得更清晰、更灵活。你可以把它想象成一个“数据仓库”，所有原始数据都先存进去，然后由不同的图表“按需取用”。这样一来，同一个数据源可以支撑多个不同类型的图表，而无需重复定义数据结构。
今天，我们就来深入聊聊这个让 ECharts 使用体验跃升的关键功能。
什么是 ECharts 数据集（dataset）？
简单来说，dataset 是 ECharts 中用于集中管理原始数据的容器。它独立于 series 存在，可以理解为“数据的源头”。当你在图表中使用 dataset 时，ECharts 会自动从这个数据集中读取数据，并根据 series 的配置进行映射和渲染。
在没有 dataset 之前，我们通常需要在每个 series 中手动写入 data 数组，这导致数据冗余、维护困难。而引入 dataset 后，数据只需定义一次，多个图表可以共享同一个数据源。
举个例子：你有一组月度销售数据，想同时画出柱状图和折线图。没有 dataset 时，你得在两个 series 中分别写一遍数据；有了 dataset，只需定义一次，两个图表都能直接引用。
创建数组与初始化
我们先从最基础的开始：如何定义一个 dataset。在 ECharts 的配置中，dataset 是 option 对象的一个顶层属性。
option = {
// 数据集定义
dataset: {
// 1. 用 source 属性定义原始数据
source: [
['月份', '销售额', '利润'],
['1月', 120, 30],
['2月', 150, 40],
['3月', 130, 35],
['4月', 180, 50],
['5月', 200, 60]
]
},
// 图表系列配置
series: [
{
type: 'bar',
// 2. 通过 dimensions 指定数据维度
dimensions: ['月份', '销售额', '利润'],
// 3. 通过 encode 映射数据到坐标轴
encode: {
x: '月份',
y: '销售额'
}
},
{
type: 'line',
dimensions: ['月份', '销售额', '利润'],
encode: {
x: '月份',
y: '利润'
}
}
]
};
代码注释说明：
dataset.source：这是数据集的核心，它是一个二维数组，第一行是列名（维度名），后续行是具体数据。这种结构类似于 Excel 表格。dimensions：在series中定义，用于告诉 ECharts 哪些列是“销售额”、“利润”等，它和source的列名对应。encode：告诉 ECharts 如何把数据映射到图表的坐标轴上。x对应横轴，y对应纵轴。- 两个
series共享同一个dataset，但分别映射不同的数据列，实现“一源多图”。
从数据源到图表的映射过程
理解 dataset 的映射机制是用好它的关键。我们可以把它想象成“数据管道”：
- 数据源输入：
dataset.source提供原始数据。 - 维度定义：
dimensions告诉 ECharts 每一列的含义。 - 坐标映射：
encode将特定列绑定到x或y轴。 - 图表渲染：ECharts 根据映射结果，自动绘制出对应图形。
这个过程就像把一筐水果（数据）放进一个分类盒（dataset），然后告诉厨师（series）：“左边那堆苹果给蛋糕用，右边那堆香蕉给果汁用”，而不需要重复搬水果。
下面是一个更复杂的例子，展示如何用 dataset 处理多维数据：
option = {
dataset: {
source: [
['城市', '2023年', '2024年', '增长率'],
['北京', 1500, 1800, 20],
['上海', 1400, 1700, 21.4],
['广州', 1200, 1400, 16.7],
['深圳', 1300, 1600, 23.1]
]
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
dimensions: ['城市', '2023年', '2024年', '增长率'],
encode: {
x: '城市',
y: '2024年'
},
name: '2024年销售额'
},
{
type: 'line',
dimensions: ['城市', '2023年', '2024年', '增长率'],
encode: {
x: '城市',
y: '增长率'
},
name: '增长率'
}
]
};
这个例子中，dataset 包含了多个维度，两个 series 分别展示“2024年销售额”和“增长率”，实现了数据的复用。
支持多种数据格式：数组、对象、URL
dataset 不仅支持 source 数组格式，还支持对象格式和远程数据源，灵活性极高。
使用对象格式（推荐用于结构化数据）
dataset: {
source: [
{ city: '北京', sales2023: 1500, sales2024: 1800, growth: 20 },
{ city: '上海', sales2023: 1400, sales2024: 1700, growth: 21.4 },
{ city: '广州', sales2023: 1200, sales2024: 1400, growth: 16.7 }
]
}
使用对象格式时，ECharts 会自动提取键名作为列名，无需手动写列标题。这种方式更符合现代开发习惯，尤其适合 JSON 数据源。
使用远程数据（通过 URL 加载）
dataset: {
url: 'https://example.com/sales-data.json',
// 可选：指定数据格式
format: 'json'
}
当数据量大或需要动态加载时，url 非常有用。ECharts 会自动请求并解析 JSON 文件，然后作为数据源使用。
| 数据格式 | 适用场景 | 优点 |
|---|---|---|
| 数组（source） | 小量静态数据 | 简单直观，便于调试 |
| 对象数组 | 结构化数据，API 返回 | 语义清晰，易维护 |
| URL | 大量数据、动态加载 | 减少初始包体积，实时更新 |
高级用法：数据转换与计算列
dataset 还支持数据转换，比如计算新列。通过 transform 配置，你可以在数据进入图表前进行加工。
dataset: {
source: [
['城市', '2023年', '2024年'],
['北京', 1500, 1800],
['上海', 1400, 1700]
],
// 数据转换配置
transform: {
// 定义一个新列：增长率 = (2024 - 2023) / 2023
type: 'calculate',
config: {
expression: '(d[2] - d[1]) / d[1] * 100',
as: '增长率'
}
}
},
series: [
{
type: 'bar',
dimensions: ['城市', '2023年', '2024年', '增长率'],
encode: {
x: '城市',
y: '增长率'
}
}
]
这里 transform 的 expression 是一个表达式，d[1] 表示第二列（2023年），d[2] 表示第三列（2024年），结果会自动添加为“增长率”列，供后续图表使用。
这个功能特别适合需要实时计算的场景，比如增长率、同比变化等。
实际应用建议
在实际项目中，我建议你这样使用 ECharts 数据集（dataset）：
- 优先使用
dataset：除非数据极简单，否则不要在series.data中直接写数据。 - 统一数据源：多个图表共享一个
dataset，避免数据不一致。 - 使用对象格式：如果数据来自 API，建议用对象数组，代码更清晰。
- 善用
transform：复杂计算不要在前端手动处理，交给dataset。 - 配合
visualMap使用：可以基于dataset中的列做颜色映射，提升可视化效果。
总结
ECharts 数据集（dataset）不是一个“可有可无”的功能，而是构建高质量可视化应用的基石。它让数据与图表的分离变得合理，让代码更简洁、维护更轻松。
通过本文的讲解，你应该已经掌握了 dataset 的核心用法：从定义数据源、映射维度，到支持远程加载和数据转换。下次当你再面对复杂图表需求时，不妨先思考：能不能用 dataset 来统一管理数据？
记住，好的可视化，从清晰的数据结构开始。而 ECharts 数据集（dataset），正是通往清晰之路的钥匙。