Echarts数据转换transform

数据转换：给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”并使用这个新的“数据集”绘制图表。

outData = f(inputData)
f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等

数据转换基础使用

var option = {
  dataset: [
    { // 这个 dataset 的 index 是 `0`。
      source: 
      // id: 'a'
    },
    { // 这个 dataset 的 index 是 `1`。
      // `transform`配置表示此dataset的数据，来自于此transform转换的结果。
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
      // 可设置可选属性：`fromDatasetIndex`或`fromDatasetId`指定transform的输入。例如：；
      // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 
      // `fromDatasetId: 'a' 表示输入来自于 `id: 'a'` 的 dataset
      // 都不指定时，默认为输入来自于 index 为 `0` 的 dataset 
    },
    { // 这个 dataset 的 index 是 `2`。
      transform: {
        // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
        type: 'filter',
        // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
        // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
        // 下面这个筛选条件：选出维度(dimension)'Year' 中值为 2012 的所有数据项。
        config: { dimension: 'Year', value: 2012 }
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['25%', '50%'],
      // 这个饼图系列引用了index为`1`的dataset。
      datasetIndex: 1
    }
  ]
};

数据转换的进阶使用
(1) 链式声明 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
  }
};

(2) 一个 transform 输出多个 data
有一些场景需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。

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', // 这个 series 引用 index 为 `1` 的 dataset 
      datasetIndex: 1
    },
    {
      name: 'outlier',
      type: 'scatter', // 这个 series 引用 index 为 `2` 的 dataset 
      datasetIndex: 2
    }
  ]
};

数据转换器 “filter”

option = {
  dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Latte', 231, 14, 2011],
        ['Cake', 143, 30, 2012],
        ['Latte', 201, 19, 2012],
      ]
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', '=': 2011 }
        // 这个筛选条件表示遍历数据筛选出维度(dimension)'Year' 上值为 2011 的所有数据项。
      }
    }
  ],
  series: {
    type: 'pie',
    datasetIndex: 1
  }
};

数据转换器 “sort”
用于排序数据。目前主要能用于在类目轴（ axis.type: ‘category’ ）中显示排过序的数据。

option = {
  dataset: [
    {
      dimensions: ['name', 'age', 'profession', 'score', 'date'],
      source: [
        [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
        ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
        [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14']
      ]
    },
    {
      transform: {
        type: 'sort', // 按分数排序
        config: { dimension: 'score', order: 'asc' }
      }
    }
  ],
  series: {
    type: 'bar',
    datasetIndex: 1
  }
};

(5) 使用外部的数据转换器

// 首先要注册外部数据转换器。
echarts.registerTransform(ecStatTransform(ecStat).regression);

option = {
  dataset: [
    {
      source: rawData
    },
    {
      transform: {
        // 每个外部的数据转换器都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）
        // 内置数据转换器（如 'filter', 'sort'）没有名空间。
        type: 'ecStat:regression',
        config: {
          // 这里是此外部数据转换器所需的参数。
          method: 'exponential'
        }
      }
    }
  ],
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: 'scatter',
      type: 'scatter',
      datasetIndex: 0
    },
    {
      name: 'regression',
      type: 'line',
      symbol: 'none',
      datasetIndex: 1
    }
  ]
};

官网链接