transform
Apache EChartsTM 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(dataset)和一个“转换方法”(transform),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。
基础使用
下述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。
var option = {
dataset: [
{
// 这个 dataset 的 index 是 `0`。
source: [
['Product', 'Sales', 'Price', 'Year'],
['Cake', 123, 32, 2011],
['Cereal', 231, 14, 2011],
['Tofu', 235, 5, 2011],
['Dumpling', 341, 25, 2011],
['Biscuit', 122, 29, 2011],
['Cake', 143, 30, 2012],
['Cereal', 201, 19, 2012],
['Tofu', 255, 7, 2012],
['Dumpling', 241, 27, 2012],
['Biscuit', 102, 34, 2012],
['Cake', 153, 28, 2013],
['Cereal', 181, 21, 2013],
['Tofu', 395, 4, 2013],
['Dumpling', 281, 31, 2013],
['Biscuit', 92, 39, 2013],
['Cake', 223, 29, 2014],
['Cereal', 211, 17, 2014],
['Tofu', 345, 3, 2014],
['Dumpling', 211, 35, 2014],
['Biscuit', 72, 24, 2014]
]
// id: 'a'
},
{
// 这个 dataset 的 index 是 `1`。
// 这个 `transform` 配置,表示,此 dataset 的数据,来自于此 transform 的结果。
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2011 }
}
// 我们还可以设置这些可选的属性: `fromDatasetIndex` 或 `fromDatasetId`。
// 这些属性,指定了,transform 的输入,来自于哪个 dataset。例如,
// `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如,
// `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
// 当这些属性都不指定时,默认认为,输入来自于 index 为 `0` 的 dataset 。
},
{
// 这个 dataset 的 index 是 `2`。
// 同样,这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定,
// 那么输入默认来自于 index 为 `0` 的 dataset 。
transform: {
// 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
type: 'filter',
// 每个 transform 如果需要有配置参数的话,都须配置在 `config` 里。
// 在这个 "filter" transform 中,`config` 用于指定筛选条件。
// 下面这个筛选条件是:选出维度( dimension )'Year' 中值为 2012 的所有
// 数据项。
config: { dimension: 'Year', value: 2012 }
}
},
{
// 这个 dataset 的 index 是 `3`。
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2013 }
}
}
],
series: [
{
type: 'pie',
radius: 50,
center: ['25%', '50%'],
// 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述
// 2011 年那个 "filter" transform 的结果。
datasetIndex: 1
},
{
type: 'pie',
radius: 50,
center: ['50%', '50%'],
datasetIndex: 2
},
{
type: 'pie',
radius: 50,
center: ['75%', '50%'],
datasetIndex: 3
}
]
};
- 在一个空的 dataset 中声明
transform
,fromDatasetIndex
/fromDatasetId
来表示我们要生成新的数据。 - 系列引用这个 dataset 。
进阶使用
链式声明 transform
option = {
dataset: [
{
source: [
// 原始数据
]
},
{
// 几个 transform 被声明成 array ,他们构成了一个链,
// 前一个 transform 的输出是后一个 transform 的输入。
transform: [
{
type: 'filter',
config: { dimension: 'Product', value: 'Tofu' }
},
{
type: 'sort',
config: { dimension: 'Year', order: 'desc' }
}
]
}
],
series: {
type: 'pie',
// 这个系列引用上述 transform 的结果。
datasetIndex: 1
}
};
一个 transform 输出多个 data
配置 dataset.fromTransformResult
在开发环境中 debug
配置项 transform.print
数据转换器 “filter”
echarts 内置提供了能起过滤作用的数据转换器
声明 transform.type: "filter"
,及条件,config.dimension
指定了维度,能设成这样的值
关系操作符,逻辑比较操作符
关于解析器( parser ):
指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:
parser: ‘time’——时间戳
parser: ‘trim’——字符串两端的空格(全角半角)和换行符去掉
parser: ‘number’——数值(非数值:NaN)
数据转换器 “sort”
“sort” 是另一个内置的数据转换器,用于排序数据
transform: {
type: 'sort',
config: [
// 对两个维度按声明的优先级分别排序。
{ dimension: 'profession', order: 'desc' },
{ dimension: 'score', order: 'desc' }
]
}