數據集

dataset 是一個專門用於管理數據的元件。雖然您可以在每個系列的 series.data 中設定數據，但我們建議您使用 dataset 來管理數據，因為 ECharts 4 開始，數據可以被多個元件重複使用，並且方便「數據和配置」的分離。畢竟，數據是最常變更的部分，而其他配置在執行時大多不會變更。

在 series 下定義 data

如果數據在 series 下定義，例如

option = {
  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]
    }
  ]
};
即時

在 series 下定義 data 適用於自訂某些特殊數據結構，例如「樹」、「圖」和大型數據。然而，這不利於多個系列之間的數據共享，以及基於原始數據的圖表類型和系列的映射安排。另一個缺點是程式設計師總是需要先將數據劃分到不同的系列（和類別）中。

在 dataset 中定義 data

如果您在 dataset 中定義 data，則具有以下優點

  • 遵循數據視覺化的概念：（I）提供數據，（II）從數據到視覺的映射，變成圖表。
  • 將數據與其他配置分開。數據經常變更，但其他配置則不然。易於單獨管理。
  • 數據可以被多個系列或元件重複使用，您不需要為每個系列建立大量數據的副本。
  • 支援更常見的數據格式，例如二維陣列、類別陣列等，以在一定程度上避免使用者轉換數據格式。

這是一個簡單的 dataset 範例

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Provide a set of data.
    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]
    ]
  },
  // Declare an x-axis (category axis).
  // The category map the first column in the dataset by default.
  xAxis: { type: 'category' },
  // Declare a y-axis (value axis).
  yAxis: {},
  // Declare several 'bar' series,
  // every series will auto-map to each column by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
即時

或者嘗試使用「類別陣列」格式

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Define the dimension of array. In cartesian coordinate system,
    // if the type of x-axis is category, map the first dimension to
    // x-axis by default, the second dimension to y-axis.
    // You can also specify 'series.encode' to complete the map
    // without specify dimensions. Please see below.

    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
即時

從數據到圖表的映射

數據視覺化的概念：（I）提供數據，（II）從數據到視覺的映射，變成圖表。

簡而言之，您可以設定這些映射配置

  • 指定 dataset 的「column」或「row」以映射 series。您可以使用 series.seriesLayoutBy 來配置它。預設是根據列進行映射。
  • 指定維度映射的規則：如何從 dataset 的維度映射到 axis、tooltip、label 和 visualMap。若要配置映射，請使用 series.encode 和 visualMap。先前的案例沒有給出映射配置，因此 ECharts 將遵循預設值：如果 x 軸是類別，則映射到 dataset.source 中的第一列；三欄圖表會將 dataset.source 中的每一列逐一映射。

配置的詳細資訊如下所示

將 dataset 的列或行映射到 series

有了數據集，您可以彈性地配置數據如何映射到軸和系列。

您可以使用 seriesLayoutBy 來變更圖表對列和行的理解。seriesLayoutBy 可以是

  • 'column'：預設值。系列放置在 dataset 的列上方。
  • 'row'：系列放置在 dataset 的行上方。

查看此案例

option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series will show in the first coordinate, each series map a row in dataset.
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    // These series will show in the second coordinate, each series map a column in dataset.
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};
即時

配置的效果顯示在 這個案例 中。

維度

常用圖表中描述的大多數數據都是「二維表格」結構，在先前的案例中，我們使用二維陣列來包含二維表格。現在，當我們將一個系列映射到一列時，該列被稱為「維度」，每一行被稱為「項目」，反之亦然。

維度可以有它們的名稱以顯示在圖表中。維度名稱可以在第一列（行）中定義。在 下一個案例 中，'score'、'amount'、'product' 是維度的名稱。實際數據從第二行開始。ECharts 會自動檢查 dataset.source 中的第一列（行）是否包含維度名稱。您也可以使用 dataset.sourceHeader: true 來宣告第一列（行）代表維度名稱。

嘗試使用單個 dataset.dimensions 或某些 series.dimensions 來定義維度，因此您可以同時指定名稱和類型。

var option1 = {
  dataset: {
    dimensions: [
      { name: 'score' },
      // can be abbreviated as 'string', to indicate dimension name
      'amount',
      // Specify dimensions in 'type'.
      { name: 'product', type: 'ordinal' }
    ],
    source: []
  }
  // ...
};

var option2 = {
  dataset: {
    source: []
  },
  series: {
    type: 'line',
    // series.dimensions will cover the config in dataset.dimension
    dimensions: [
      null, // use null if you do not want dimension name.
      'amount',
      { name: 'product', type: 'ordinal' }
    ]
  }
  // ...
};

在大多數情況下，您不需要定義維度類型，因為 ECharts 會自動判斷它。如果判斷不準確，您可以手動定義它。

維度類型可以是以下值

  • 'number'：預設值，一般數據。
  • 'ordinal'：字串類型數據，如類別，文字只能在軸上使用，並且維度類型為 'ordinal'。ECharts 會嘗試自動判斷此類型，但可能不準確，因此您可以手動指定。
  • 'time'：若要表示時間數據，如果維度類型定義為 'time'，ECharts 可以自動將數據分析為時間戳記。例如，如果此維度的數據是 '2017-05-10'，ECharts 將自動分析。如果維度用作時間軸 (axis.type = 'time')，則維度類型也將是 'time'。如需更多時間類型支援，請參閱 data。
  • 'float'：使用 TypedArray 來最佳化 'float' 維度的效能。
  • 'int'：使用 TypedArray 來最佳化 'int' 維度的效能。

從數據到圖表的映射 (series.encode)

在了解維度的概念後，您可以使用 series.encode 來進行映射

var option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // Map "amount" column to x-axis.
        x: 'amount',
        // Map "product" row to y-axis.
        y: 'product'
      }
    }
  ]
};
即時

series.encode 宣告的基本結構

  • 冒號的左側：軸或標籤的特定名稱。
  • 冒號的右側：維度名稱（字串）或數字（整數，從 0 開始計數），以指定一個或多個維度（使用陣列）。

一般而言，不需要定義以下資訊。請根據需要填寫。

series.encode 建議的屬性

// Supported in every coordinate and series:
encode: {
  // Display the value of dimension named "product" and "score" in tooltip.
  tooltip: ['product', 'score']
  // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)
  seriesName: [1, 3],
  // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id
	// when using setOption to update data, so that it can show animation properly.
  itemId: 2,
  // The itemName will show in the legend of Pie Charts.
  itemName: 3
}

// Grid/cartesian coordinate unique configs:
encode: {
  // Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:
  x: [1, 5, 'score'],
  // Map "Dimension 0" to y-axis:
  y: 0
}

// singleAxis unique configs:
encode: {
  single: 3
}

// Polar coordinate unique configs:
encode: {
  radius: 3,
  angle: 2
}

// Geo-coordinate unique configs:
encode: {
  lng: 3,
  lat: 2
}

// For some charts without coordinate like pie chart, funnel chart:
encode: {
  value: 3
}

這是一個更豐富的 series.encode 範例。

預設的 series.encode

值得一提的是，如果未指定 series.encode，ECharts 會為一些一般圖表（折線圖、長條圖、散佈圖、蠟燭圖等）使用一些預設的映射規則。預設規則為

  • 在座標系統中（例如，笛卡爾、極座標）
    • 如果有類別軸 (axis.type = 'category')，則將第一列（行）映射到軸，並將每個後續的列（行）映射到每個系列。
    • 如果兩個軸都不是類別，則將一個系列中的每兩列映射到兩個軸。
  • 沒有軸（例如，圓餅圖）
    • 使用第一列（行）作為名稱，第二列（行）作為值。如果只有一列（行），ECharts 將不會設定名稱。

雖然預設規則無法滿足需求，但您可以自行配置 encode，這並不複雜。這是一個範例。

series.encode 的一些常見設定

問：如何將第 3 列設定為 x 軸，第 5 列設定為 y 軸？

答

option = {
  series: {
    // dimensionIndex count from 0, so the 3rd line is dimensions[2].
    encode: { x: 2, y: 4 }
    // ...
  }
};

問：如何將第 3 行設定為 x 軸，第 5 行設定為 y 軸？

答

option = {
  series: {
    encode: { x: 2, y: 4 },
    seriesLayoutBy: 'row'
    // ...
  }
};

問：如何將第 2 列設定為標籤？

答：我們現在支援從特定維度追蹤 label.formatter 的值

series: {
  label: {
    // `'{@score}'` means the value in the dimension named "score".
    // `'{@[4]}'` means the value in dimension 4.
    formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';
  }
}

問：如何在工具提示中顯示第 2 列和第 3 列？

答

option = {
  series: {
    encode: {
      tooltip: [1, 2]
      // ...
    }
    // ...
  }
};

問：如果數據集中未包含維度名稱，如何定義維度名稱？

答

var option = {
  dataset: {
    dimensions: ['score', 'amount'],
    source: [
      [89.3, 3371],
      [92.1, 8123],
      [94.4, 1954],
      [85.4, 829]
    ]
  }
};

問：如何將第 3 列映射到散佈圖的大小？

答

var option = {
  dataset: {
    source: [
      [12, 323, 11.2],
      [23, 167, 8.3],
      [81, 284, 12],
      [91, 413, 4.1],
      [13, 287, 13.5]
    ]
  },
  visualMap: {
    show: false,
    dimension: 2, // means the 3rd column
    min: 2, // lower bound
    max: 15, // higher bound
    inRange: {
      // Size of the bubble.
      symbolSize: [5, 60]
    }
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter'
  }
};
即時

問：我已在 encode 中指定了映射，為什麼它不起作用？

答：檢查您的拼寫，例如在 encode 中將維度名稱 'Life Expectancy' 誤拼為 'Life Expectency'。

視覺通道映射

我們可以使用 visualMap 來映射視覺通道。請查看 visualMap 文件中的詳細資訊。這是一個 範例。

圖表格式

在大多數常見的圖表中，數據通常適合以二維表格的形式呈現。像是「MS Excel」和「Numbers」等知名的軟體都使用二維表格。它們的數據可以匯出成 JSON 格式，並輸入到 dataset.source 中，這樣可以避免一些數據處理的步驟。

您可以使用像是 dsv 或 PapaParse 等工具將 .csv 檔案轉換成 JSON 格式。

如同後面的範例所示，在 JavaScript 的數據傳輸中，二維數據可以直接以二維陣列儲存。

除了二維陣列之外，dataset 也支援使用鍵值對 (key-value) 的形式，這也是一種常見的方式。然而，目前我們不支援此格式的 seriesLayoutBy。

dataset: [
  {
    // column by column key-value array is a normal format
    source: [
      { product: 'Matcha Latte', count: 823, score: 95.8 },
      { product: 'Milk Tea', count: 235, score: 81.4 },
      { product: 'Cheese Cocoa', count: 1042, score: 91.2 },
      { product: 'Walnut Brownie', count: 988, score: 76.9 }
    ]
  },
  {
    // row by row key-value
    source: {
      product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
      count: [823, 235, 1042, 988],
      score: [95.8, 81.4, 91.2, 76.9]
    }
  }
];

如何引用多個數據集

ECharts 支援同時定義多個數據集。Series 可以透過 series.datasetIndex 指定要引用的數據集。例如：

var option = {
  dataset: [
    {
      // 1st Dataset
      source: []
    },
    {
      // 2nd Dataset
      source: []
    },
    {
      // 3rd Dataset
      source: []
    }
  ],
  series: [
    {
      // Use 2nd dataset
      datasetIndex: 1
    },
    {
      // Use 1st dataset
      datasetIndex: 0
    }
  ]
};

ECharts 3 中的 series.data

ECharts 4 仍然支援 ECharts 3 的數據宣告方式。如果 series 已經宣告了 series.data，則會使用 series.data，而不是 dataset。

option = {
  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]
    }
  ]
};

事實上，series.data 是一種重要的設定方法，而且它將永遠存在。一些特殊的非表格格式圖表，例如 treemap、graph 和 lines 等，仍然無法在 dataset 中編輯，您仍然需要使用 series.data。另一方面，對於渲染大量數據（超過一百萬筆）的情況，您需要使用 appendData，而 dataset 並不支援此功能。

其他

目前以下圖表支援 dataset：line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。ECharts 未來將支援更多圖表。

最後，這裡有一個 範例，展示了多個圖表共用同一個 dataset 並進行聯動互動。

貢獻者 在 GitHub 上編輯此頁面

plainheart plainheartpissang pissangOvilia Ovilia100pah 100pahHertz-Hu Hertz-HuBruce20190410 Bruce20190410YuanyeChi YuanyeChisimonmcconnell simonmcconnell