[JavaScript知识库]2022 1.15学习总结

1.在数据集（dataset）中设置数据?

????????可以用数组形式也可以用对象形式。

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

? ? ? ? 在x轴中声明type为category，对应dataset的第一列，放到x轴上。

? ? ? ? 也可以对应dataset的第一行，放到x轴上。即在系列(series)中，添加设置

series: [
    // 这个系列对应到 dataset 的每一行。
    { type: 'bar', seriesLayoutBy: 'row' },
  ]

? ? ? ? ?系列所对应的行或列，就成为一个维度。可以在dataset或者series中添加dimensions来设置维度名称。

series: {
    dimensions: [
      null, // 可以设置为 null 表示不想设置维度名
      'amount',
      { name: 'product', type: 'ordinal' }    //type设置维度属性，一般不设置
    ]
  }

2. 数据的映射：series.encode

var option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // 将 "amount" 列映射到 X 轴。
        x: 'amount',
        // 将 "product" 列映射到 Y 轴。
        y: 'product'
      }
    }
  ]
};

? ? ? ? 这里encode中的x和y也可以写数字，表示将第几列（行）映射到轴上。（从0开始）

option = {
  series: {
    // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。
    encode: { x: 2, y: 4 }
    // ...
  }
};

3.数据转换

? ? ? ? 1.数据转换是基于dataset实现，可以通过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出来的结果。
      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` 用于指定筛选条件。
        config: { dimension: 'Year', value: 2012 }   
        // 上面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 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转换出来放在一个新的dataset中，然后再series中匹配datasetIndex即可。

? ? ? ? 2.可以链式声明transform，即不需要设置fromDatasetIndex，链式传导。

option = {
  dataset: [
    {
      source: [
        // 原始数据
      ]
    },
    {
      // 几个 transform 被声明成 array ，他们构成了一个链，
      // 前一个 transform 的输出是后一个 transform 的输入。
      transform: [
        {
          type: 'filter',
          config: { dimension: 'Product', value: 'Tofu' }
        },
        {
          type: 'sort',
          config: { dimension: 'Year', order: 'desc' }
        }
      ]    //即第一个过滤出来Product为Tofu的数据，然后再进行对Year的排序
    }
  ],
  series: {
    type: 'line',
    // 这个系列引用上述 transform 的结果。
    datasetIndex: 1
  }
};

? ? ? ? 3.上述转换type中的filter，可以过滤出筛选条件的内容。dimension也可以写数字。

      transform: {
        type: 'filter',
        config: { dimension: 'Year', '=': 2011 }
        // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
        // 'Year' 上值为 2011 的所有数据项。
      }

? ? ? ? 也可以书写一些计算符，筛选出Price中>=20和<30的数据

{ dimension: 'Price', '>=': 20, '<': 30 }

? ? ? ? 也支持逻辑比较：与或非（and，or，not）

          and: [
            { dimension: 'Year', '=': 2011 },
            { dimension: 'Price', '>=': 20, '<': 30 }
          ]

? ? ? ? 在进行逻辑比较时，有些数据不能直接比较，需要解析器，先进行解析，再进行比较，常见的有一下三个

? ? ? ? 1.?parser: 'time'——解析成时间戳再进行比较。

? ? ? ? 2. parser: 'trim'——解析成字符串，删除空格换行符什么的，再进行比较

? ? ? ? 3.parser:'number'——解析成数字进行比较，如果后面带px或者%，会先删掉在比较。

? ? ? ? 4.上述中的sort是排序，可以进行多重排序

      transform: {
        type: 'sort',
        config: [
          // 对两个维度按声明的优先级分别排序。
          { dimension: 'profession', order: 'desc' },
          { dimension: 'score', order: 'desc' }
        ]
      }