快捷導(dǎo)航

前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理

更新時間：2022年12月23日 15:42:09 作者：黎燃

這篇文章主要為大家介紹了前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

dataset 管理數(shù)據(jù)

提供一份數(shù)據(jù)。聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應(yīng)到聲明多個 bar 系列，默認情況下，每個系列會自動對應(yīng)到 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]
        ]
    },
    //dataset 第一列。
    xAxis: {type: 'category'},
    // 聲明一個 Y 軸，數(shù)值軸。
    yAxis: {},
    // 
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

Apache EChartsTM 4

Apache EChartsTM 4開始支持數(shù)據(jù)集組件進行單獨的數(shù)據(jù)集聲明，以便數(shù)據(jù)可以單獨管理，由多個組件重用，并且可以基于數(shù)據(jù)指定數(shù)據(jù)到可視化的映射。這可以在許多場景中帶來方便。在ECharts 4之前，數(shù)據(jù)只能以“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]
        }
    ]
}

該方法的優(yōu)點是直觀、易于理解，適用于某些特殊圖表類型的特定數(shù)據(jù)類型定制。然而，缺點是為了匹配這種數(shù)據(jù)輸入形式，通常需要有一個數(shù)據(jù)處理過程，并將數(shù)據(jù)分割設(shè)置為每個系列（和類別軸）。此外，這不利于多個系列共享一個數(shù)據(jù)，也不利于基于原始數(shù)據(jù)的圖表類型和系列的映射排列。因此，ECharts 4提供了一個單獨聲明數(shù)據(jù)的數(shù)據(jù)集組件，這帶來了以下效果：它可以接近數(shù)據(jù)可視化的常見思維模式：

（I）提供數(shù)據(jù)，（II）指定數(shù)據(jù)到視覺的映射，從而形成圖表。數(shù)據(jù)和其他配置可以分開。數(shù)據(jù)始終在變化，其他配置始終不變。分離易于單獨管理。數(shù)據(jù)可以被多個系列或組件重用。對于具有大量數(shù)據(jù)的場景，不必為每個系列創(chuàng)建一個數(shù)據(jù)。支持更常見的數(shù)據(jù)格式，如二維數(shù)組、對象數(shù)組等，在一定程度上避免用戶轉(zhuǎn)換為數(shù)據(jù)格式。

dimensions 指定了維度的順序

用 dimensions 指定了維度的順序。直角坐標系中，默認把第一個維度映射到 X 軸上，第二個維度映射到 Y 軸上。如果不指定 dimensions，也可以通過指定 series.encode，完成映射。

option = {
    legend: {},
    tooltip: {},
    dataset: {
        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'}
    ]
};

一目了然，可以進行以下映射：指定數(shù)據(jù)集的列或行是否映射到一系列圖形。您可以使用SeriesLayoutBy屬性。默認值是按列映射。

series: {
    // 注意維度序號（dimensionIndex）從 0 開始計數(shù)，第三列是 dimensions[2]。
    encode: {x: 2, y: 4},
    ...
}

指定維度映射規(guī)則：如何將數(shù)據(jù)集維度（“維度”表示行/列）映射到坐標軸（如X和Y軸）、工具提示、標簽、圖形元素大小和顏色（visualMap）。您可以使用series配置encode屬性和visualMap組件（如果需要映射的顏色大小等視覺維度）。在上面的示例中，ECharts沒有提供這種映射配置，因此ECharts將根據(jù)最常見的理解執(zhí)行默認映射：X坐標軸聲明為類別軸，默認情況下將自動對應(yīng)于數(shù)據(jù)集源中的第一列；三列圖表系列，逐一對應(yīng)數(shù)據(jù)集源中的每個后續(xù)列。

series: {
    encode: {x: 2, y: 4},
    seriesLayoutBy: 'row',
    ...
}

在系列中設(shè)置的 dimensions 會更優(yōu)先采納。可以在 type 中指定維度類型?？梢院唽憺?string，表示維度名。

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 
            'amount',
            // 
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};
var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 
        dimensions: [
            null, // 可以設(shè)置為 null 表示不想設(shè)置維度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};

數(shù)據(jù)表軟件

在大多數(shù)常見的圖表中，數(shù)據(jù)可以以二維表格的形式描述。廣泛使用的數(shù)據(jù)表軟件（如MS Excel、Numbers）或關(guān)系數(shù)據(jù)數(shù)據(jù)庫是二維表。它們的數(shù)據(jù)可以導(dǎo)出為JSON格式并輸入到數(shù)據(jù)集。在源代碼中，在許多情況下可以省略一些數(shù)據(jù)處理步驟。如果數(shù)據(jù)導(dǎo)出到csv文件，則可以使用一些csv工具（如dsv或PapaParse）將csv轉(zhuǎn)換為JSON。在JavaScript的常見數(shù)據(jù)傳輸格式中，二維數(shù)組可以直觀地存儲二維表。前面的示例都由二維數(shù)組表示。除了二維數(shù)組，數(shù)據(jù)集還支持以下鍵值數(shù)據(jù)格式，這些格式也非常常見。但是，seriesLayoutBy參數(shù)在此類格式中不受支持。按行的 key-value 形式（對象數(shù)組），這是個比較常見的格式。按列的 key-value 形式。

dataset: [{
    // 
    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}
    ]
}, {
    //
    source: {
        'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
        'count': [823, 235, 1042, 988],
        'score': [95.8, 81.4, 91.2, 76.9]
    }
}]