Ellie's Blog
0%

ECharts 05数据集（dataset）

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

Documentation - Apache ECharts

echart 從 0 到 1_copyLeft - MdEditor

筆記

基礎

6/30 ECharts 数据集（dataset）-基礎

pic

  • 提供一份数据。
    pic
  • 声明一个 X 轴，类目轴（category）。
    • 默认情况下，类目轴对应到 dataset 第一列。
    • 也就是 [‘product’, ‘2015’, ‘2016’, ‘2017’],
      pic–.png)
  • 声明一个 Y 轴，
    • 数值轴。
  • 設定 series 的類型
    • 對應到上面 X 軸的年份
      pic

数据设置在  系列（series）中

  • X 軸設定欄位
    pic
  • 数据设置在   系列（series）中
    pic
    pic

数据设置在  数据集（dataset）中

  • 能够贴近数据可视化常见思维方式：
    • （I）提供数据，（II）指定数据到视觉的映射，从而形成图表。
    • 有點像是 EXCEL 表格的感覺
  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
    • 跟Ｙ、Ｘ軸的設定可以分開寫
    • 不會雜亂
  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'], //X軸
      ['Matcha Latte', 43.3, 85.8, 93.7],
      //對應到上面['product', '2015', '2016', '2017']
      // EX: Matcha Latte 2015年的數量是43.3
      ['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' }],
};
  • 很像 EXCEL 格式
    pic

使用 dimensions — 常见的“对象数组”的格式

6/30 ECharts 数据集（dataset）-使用 dimensions - 常见的”对象数组”的格式

  • 用 dimensions 指定了维度的顺序
    1
    dimensions: ['product', '2015', '2016', '2017'],
  • 默认把第一个维度(product)映射到 X 轴上，后面维度映射到 Y 轴上。
    1
    2
    3
    4
    5
    6
    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 },
    ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
    // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。

    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' }],
};
  • 很像 EXCEL 格式
    pic

*把数据集（ dataset ）的行或列映射为系列（series）****

6/30 ECharts 数据集 -把数据集（ dataset ）的行或列映射为系列（series）

  • xAxis

    • 有兩個 X 軸 ((兩個 grid
      1
      2
      3
      4
      xAxis: [
          { type: 'category', gridIndex: 0 },//對應到第一列 ['product', '2012', '2013', '2014', '2015'],
          { type: 'category', gridIndex: 1 } //對應到第一行  'Matcha Latte' 'Milk Tea' 'Cheese Coco
        ],
      pic

  • yAxis

    1
    2
    yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],

pic

  • grid
    • 欄 /分組
    • grid: [{ bottom: ‘55%’ }, { top: ‘55%’ }],
      • 設定第 0 個 grid 距離底部 55%
      • 第 1 個 grid 距離 top 55%
  • series
    • 上面的 grid
      1
      2
      3
      4
      //每个系列对应到 dataset 的每一行。
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' },
    • 下面的 grid
      1
      2
      3
      4
      5
      6
      // 每个系列对应到 dataset 的每一列。
      //使用的數據是X軸的gridIndex: 1
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }

seriesLayoutBy

  • 用甚麼分組 ?
    • 我的 data

pic

  • seriesLayoutBy: row
    • 用第一列分組
      pic
  • seriesLayoutBy: column
    • 用 column 分組
      pic

series.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）

6/30 ECharts 数据集 -series.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）

pic

pic

visualMap 进行视觉通道的映射

6/30 ECharts 数据集 -visualMap 进行视觉通道的映射

  • 用來看看比例的
    pic
  • 可調整的:
    • symbol: 图元的图形类别。
    • symbolSize: 图元的大小。
    • color: 图元的颜色。
    • colorAlpha: 图元的颜色的透明度。
    • opacity: 图元以及其附属物（如文字标签）的透明度。
    • colorLightness: 颜色的明暗度。
    • colorSaturation: 颜色的饱和度。
    • colorHue: 颜色的色调。

**交互联动 多个图表共享一个 dataset**

6/30 ECharts 数据集 -交互联动 多个图表共享一个 dataset

pic