使用 transform 进行数据转换第一部分

更多关于Apache ECharts的文档，请阅读:

• Apache ECharts文档专题

---

《Apache ECharts教程》

• 5 分钟上手 ECharts
• ECharts 5 新特性
• ECharts 5 升级指南
• 在打包环境中使用 ECharts
• ECharts 基础概念概览
• 个性化图表的样式
• ECharts 中的样式简介
• 异步数据加载和更新
• 使用 dataset 管理数据
• 使用 transform 进行数据转换第一部分
• 使用 transform 进行数据转换第二部分
• 在图表中加入交互组件
• 移动端自适应
• 数据的视觉映射
• ECharts 中的事件和行为
• 动态排序柱状图
• 小例子：自己实现拖拽
• 小例子：实现日历图
• 旭日图
• 自定义系列
• 富文本标签
• 服务端渲染
• 使用 Canvas 或者 SVG 渲染
• 地理坐标系和地图系列的 SVG 底图
• 在图表中支持无障碍访问
• 使用 ECharts GL 实现基础的三维可视化
• 在微信小程序中使用 ECharts

---

Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。

抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

• 把数据分成多份用不同的饼图展现。
• 进行一些数据统计运算，并展示结果。
• 用某些数据可视化算法处理数据，并展示结果。
• 数据排序。
• 去除或直选择数据项。
• …

数据转换基础使用

在 echarts 中，数据转换是依托于数据集（dataset）来实现的. 我们可以设置 dataset.transform 来表示，此 dataset 的数据，来自于此 transform 的结果。例如。

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
    }]
};

下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。

现在我们简单总结下，使用 transform 时的几个要点：

• 在一个空的 dataset 中声明 transform, fromDatasetIndex/fromDatasetId 来表示我们要生成新的数据。
• 系列引用这个 dataset 。

数据转换的进阶使用

链式声明 transform

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 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。

一个 transform 输出多个 data

在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。

例如，在内置的 “boxplot” transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，example。

我们提供配置 dataset.fromTransformResult 来满足这种情况，例如：

option = {
    dataset: [{
        // 这个 dataset 的 index 为 `0`。
        source: [...] // 原始数据
    }, {
        // 这个 dataset 的 index 为 `1`。
        transform: {
            type: 'boxplot'
        }
        // 这个 "boxplot" transform 生成了两个数据：
        // result[0]: boxplot series 所需的数据。
        // result[1]: 离群点数据。
        // 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到
        // result[0] 。
        // 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ：
    }, {
        // 这个 dataset 的 index 为 `2`。
        // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。
        fromDatasetIndex: 1,
        // 并且指定了获取 transform result[1] 。
        fromTransformResult: 1
    }],
    xAxis: {
        type: 'category'
    },
    yAxis: {
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        // Reference the data from result[0].
        // 这个 series 引用 index 为 `1` 的 dataset 。
        datasetIndex: 1
    }, {
        name: 'outlier',
        type: 'scatter',
        // 这个 series 引用 index 为 `2` 的 dataset 。
        // 从而也就得到了上述的 transform result[1] （即离群点数据）
        datasetIndex: 2
    }]
};

另外，dataset.fromTransformResult 和 dataset.transform 能同时出现在一个 dataset 中，这表示，这个 transform 的输入，是上游的结果中以 fromTransformResult 获取的结果。例如：

{
    fromDatasetIndex: 1,
    fromTransformResult: 1,
    transform: {
        type: 'sort',
        config: { dimension: 2, order: 'desc' }
    }
}

在开发环境中 debug

使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 transform.print 方便 debug 。这个配置项只在开发环境中生效。如下例：

option = {
    dataset: [{
        source: [ ... ]
    }, {
        transform: {
            type: 'filter',
            config: { ... }
            // 配置为 `true` 后， transform 的结果
            // 会被 console.log 打印出来。
            print: true
        }
    }],
    ...
}