dataset 数据集

介绍

数据集（dataset） 是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样：

1. 数据可以被多个组件复用
2. 方便进行 “数据和其他配置” 分离的配置风格。

series.data 写法

option = {
  legend: {},
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4],
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9],
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1],
    },
  ],
}

dataset 写法

“二维表”的写法

类似于 “二维表”，以下面的数据为例：

• 第一列 (product)：是 类目轴（category axis），对应 X 轴（xAxis: { type: 'category' }）。
• 第一行 (['product', '2015', '2016', '2017'])：其中 2015、2016、2017 代表的是不同的 系列（series）名称，即它们会作为不同的柱状图系列，而 product 只是一个标签，不会作为数据的一部分。
• 数据行 (Matcha Latte、Milk Tea、Cheese Cocoa、Walnut Brownie 等)：
  • 第一列对应 X 轴的 类目名称（产品名称）。
  • 剩下的数值（43.3、85.8、93.7...）会分别归入 不同的系列（2015、2016、2017）。
• series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]：
  • 由于 dataset 自动解析数据，每一列（除第一列外）都会成为一个 series，所以默认会生成 3 个柱状图系列，分别对应 2015、2016 和 2017。

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],
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
}

dimensions（维度）的写法

维度的定义，也可以使用单独的 dataset.dimensions 或者 series.dimensions 来定义

option = {
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['product', '2015', '2016', '2017'], // 明确指定维度
    source: [
      ['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],
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
}