關於 ECharts4 新增的數據集（dataset）

時間 2019-11-24

標籤關於 echarts4 echarts 新增數據 dataset 简体版

原文原文鏈接

ECharts 4 開始有了 `數據集`（`dataset`）組件來單獨聲明數據，大概長這個樣子：
javascript

option = {
    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]
        ] 
    },
    legend: {},
    tooltip: {},
    // 聲明一個 X 軸，類目軸（category）。默認狀況下，類目軸對應到 dataset 第一列。
    xAxis: {type: 'category'},
    // 聲明一個 Y 軸，數值軸。
    yAxis: {},
    // 聲明多個 bar 系列，默認狀況下，每一個系列會自動對應到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
} 
複製代碼

這個最簡單的例子，獲得的效果是這樣的：html

數據集帶來的好處是：java

有了 `dataset` 後，可以貼近這樣的數據可視化常見思惟方式：基於數據（`dataset` 組件來提供數據），指定數據到視覺的映射（由 `encode` 屬性來指定映射），造成圖表。
數據和其餘配置能夠被分離開來，使用者相對便於進行單獨管理，也省去了一些數據處理的步驟。
數據能夠被多個系列或者組件複用，對於大數據，沒必要爲每一個系列建立一份。
支持更多的數據的經常使用格式，例如二維數組、對象數組等，必定程度上避免使用者爲了數據格式而進行轉換。

數據到圖形的映射

本篇裏，咱們製做數據可視化圖表的邏輯是這樣的：基於數據，在配置項中指定如何映射到圖形。git

概略而言，能夠進行這些映射：github

指定 dataset 的列（column）仍是行（row）映射爲圖形系列（series）。這件事可使用 `series.seriesLayoutBy` 屬性來配置。
指定 dataset 的哪些列（column）或行（row）對應到座標軸（如 X、Y 軸）、提示框（tooltip）、標籤（label）、圖形元素大小顏色等（visualMap）。這件事可使用 `series.encode` 屬性來配置。若是有須要映射顏色大小等視覺維度，可使用 visualMap 組件。

按行仍是按列作映射

有了數據表以後，使用者能夠靈活得配置：數據如何對應到軸和圖形系列。上面的例子中，沒有給出這種映射配置，那麼ECharts 就按最多見的理解進行默認映射：數據庫

X 座標軸聲明爲類目軸，默認狀況下會自動對應到 dataset.source 中的第一列；
三個柱圖系列，一一對應到 dataset.source 中後面每一列。

用戶可使用 `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: [
        // 這幾個系列會在第一個直角座標系中，每一個系列對應到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 這幾個系列會在第二個直角座標系中，每一個系列對應到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}
複製代碼

效果是這樣的：性能優化

更重要的是，咱們可使用 `encode` 配置項來更細節得指定數據如何映射到圖形。整體是這樣的感受：bash

維度（dimension）

介紹 `encode` 以前，首先要介紹「維度（dimension）」的概念。echarts

經常使用圖表所描述的數據大部分是「二維表」結構，上述的例子中，咱們都使用二維數組來容納二維表。如今，當咱們把系列（series）對應到「列」的時候，那麼每一列就稱爲一個「維度（dimension）」，而每一行稱爲數據項（item）。反之，若是咱們把系列（series）對應到錶行，那麼每一行就是「維度（dimension）」，每一列就是數據項（item）。

維度能夠有單獨的名字，便於在圖表中顯示。維度名（dimension name）能夠在定義在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是維度名。從第二行開始，纔是正式的數據。`dataset.source` 中第一行（列）到底包含不包含維度名，ECharts 默認會自動探測。固然也能夠設置 `dataset.sourceHeader: true` 顯示聲明第一行（列）就是維度，或者 `dataset.sourceHeader: false` 代表第一行（列）開始就直接是數據。

維度的定義，也可使用單獨的 `dataset.dimensions` 或者 `series.dimensions` 來定義，這樣能夠同時指定維度名，和維度的類型（dimension type）：

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 能夠簡寫爲 string，表示維度名。
            'amount',
            // 能夠在 type 中指定維度類型。
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};

var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 在系列中設置的 dimensions 會更優先採納。
        dimensions: [
            null, // 能夠設置爲 null 表示不想設置維度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};
複製代碼

大多數狀況下，咱們並不須要去設置維度類型，由於會自動判斷。可是若是由於數據爲空之類緣由致使判斷不足夠準確時，能夠手動設置維度類型。

維度類型（dimension type）能夠取這些值：

'number': 默認，表示普通數據。
'ordinal': 對於類目、文本這些 string 類型的數據，若是須要能在數軸上使用，須是 'ordinal' 類型。ECharts 默認會自動判斷這個類型。可是自動判斷也是不可能很完備的，因此使用者也能夠手動強制指定。
'time': 表示時間數據。設置成 'time' 則能支持自動解析數據成時間戳（timestamp），好比該維度的數據是 '2017-05-10'，會自動被解析。時間類型的支持參見 [data](option.html#series.data)。
'float': 若是設置成 `float`，在存儲時候會使用 `TypedArray`，對性能優化有好處。
'int': 若是設置成 `float`，在存儲時候會使用 `TypedArray`，對性能優化有好處。

數據到圖形的映射（encode）

瞭解了維度的概念後，咱們就可使用 `encode` 來作映射。`encode` 聲明的基本結構以下，其中冒號左邊是座標系、標籤等特定名稱，如 `'x'`, `'y'`, `'tooltip'` 等，冒號右邊是數據中的維度名（string 格式）或者維度的序號（number 格式，從 0 開始計數），能夠指定一個或多個維度（使用數組）。一般狀況下，下面各類信息不須要全部的都寫，按需寫便可。

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: {
                // 將 "amount" 列映射到 X 軸。
                x: 'amount',
                // 將 "product" 列映射到 Y 軸。
                y: 'product'
            }
        }
    ]
};
複製代碼

效果以下：

下面給出個更豐富的 `encode` 的示例。

視覺通道（顏色、尺寸等）的映射

咱們可使用 `visualMap` 組件進行視覺通道的映射。這是一個示例：

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']
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#D7DA8B', '#E15457']
        }
    },
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
複製代碼

幾個常見的映射設置方式

問：如何把第三列設置爲 X 軸，第五列設置爲 Y 軸？

答：

series: {
    encode: {x: 3, y: 5},
    ...
}
複製代碼

問：如何把第三行設置爲 X 軸，第五行設置爲 Y 軸？

答：

series: {
    encode: {x: 3, y: 5},
    seriesLayoutBy: 'row',
    ...
}
複製代碼

問：如何把第二列設置爲標籤？

答：

關於標籤的顯示（`label.formatter`），如今支持使用這樣的語法：

'aaa{@product}bbb{@score}ccc{@[4]}ddd' 來引用某個具體的維度值。其中 '{@score}' 表示由於「名爲 score」的維度裏的值，'{@[4]}' 表示引用序號爲 4 的維度裏的值。

series: [{
    label: {
        show: true,
        // 標籤中引用第二列。
        formatter: 'The value at column 2 is: {@[2]}.'
    },
    ...
}, {
    label: {
        show: true,
        // 標籤中引用維度名爲 product 的列。
        formatter: 'The product name is: {@product}.'
    },
    ...
}]
複製代碼

問：如何讓第 2 列和第 3 列顯示在提示框（tooltip）中？

答：

series: {
    encode: {
        tooltip: [2, 3]
        ...
    },
    ...
}
複製代碼

問：數據裏沒有維度名，那麼怎麼給出維度名？

答：

dataset: {
    dimensions: ['score', 'amount'],
    source: [
        [89.3, 3371],
        [92.1, 8123],
        [94.4, 1954],
        [85.4, 829]
    ]
}
複製代碼

問：如何把第四列映射爲氣泡圖的點的大小？

答：

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, // 指向第三列（列序號從 0 開始記，因此設置爲 2）。
        min: 2, // 須要給出數值範圍，最小數值。
        max: 15, // 須要給出數值範圍，最大數值。
        inRange: {
            // 氣泡尺寸：5 像素到 60 像素。
            symbolSize: [5, 60]
        }
    },
    xAxis: {},
    yAxis: {},
    series: {
        type: 'scatter'
    }
};
複製代碼

問：encode 裏指定了映射，可是無論用？

答：能夠查查有沒有拼錯，好比，維度名是：'Life Expectancy'，encode 中拼成了 'Life Expectency'。

數據的各類格式

多數常見圖表中，數據適於用二維表的形式描述。廣爲使用的數據表格軟件（如 MS Excel、Numbers）或者關係數據數據庫都是二維表。他們的數據能夠導出成 JSON 格式，輸入到 `dataset.source` 中，在很多狀況下能夠免去一些數據處理的步驟。

假如數據導出成 csv 文件，那麼可使用一些 csv 工具如 [dsv]( github.com/d3/d3-dsv) 或者 [PapaParse]( github.com/mholt/PapaP…) 將 csv 轉成 JSON。

在 JavaScript 經常使用的數據傳輸格式中，二維數組能夠比較直觀的存儲二維表。前面的示例都是使用二維數組表示。

除了二維數組之外，dataset 也支持例以下面 key-value 方式的數據格式，這類格式也很是常見。可是這類格式中，目前並不支持 `seriesLayoutBy` 參數。

dataset: [{
    // 按行的 key-value 形式，這是個比較常見的格式。
    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}
    ]
}, {
    // 按列的 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]
    }
}]
複製代碼