ECharts transform資料轉換和dataZoom在專案中使用

2022-12-25 14:01:57

transform 進行資料轉換

資料轉換是這樣一個公式：outData=f（inputData）。F是轉換方法，例如filter、sort、region、boxplot、cluster、aggregate（todo）等。有了資料轉換功能，我們至少可以做到以下幾點：將資料分成多個部分，並在不同的餅圖中顯示它們。執行一些資料統計操作並顯示結果。使用一些資料視覺化演演算法來處理資料並顯示結果。資料排序。刪除或直接選擇資料項。

  series: [{
        type: 'pie', radius: 50, center: ['25%', '50%'],
        // 這個餅圖系列，參照了 index 為 `1` 的 dataset 。也就是，參照了上述
        // 2011 年那個 "filter" transform 的結果。
        datasetIndex: 1
    }, {
        type: 'pie', radius: 50, center: ['50%', '50%'],
        datasetIndex: 2
    }, {
        type: 'pie', radius: 50, center: ['75%', '50%'],
        datasetIndex: 3
    }]
};

在大多數情況下，轉換隻需要輸出一個資料。然而，也有一些場景需要輸出多個資料，每個資料可以由不同的系列或資料集使用。例如，在內建的“boxplot”轉換中，除了boxplot系列所需的資料外，還將生成異常值，並可以使用散點圖系列進行顯示。例如我們提供設定資料集FromTransformResult，例如：

option: {
    dataset: [{
        source: [ ... ] // 原始資料
    }, {
        // 幾個 transform 被宣告成 array ，他們構成了一個鏈，
        // 前一個 transform 的輸出是後一個 transform 的輸入。
        transform: [{
            type: 'filter',
            config: { dimension: 'Product', value: 'Tofu' }
        }, {
            type: 'sort',
            config: { dimension: 'Year', order: 'desc' }
        }]
    }],
    series: {
        type: 'pie',
        // 這個系列參照上述 transform 的結果。
        datasetIndex: 1
    }
}

當使用轉換時，有時我們將無法顯示結果，而且我們不知道哪裡出了問題。因此，這裡提供了一個設定項轉換。列印方便偵錯。此設定項僅在開發環境中生效。

option = {
    dataset: [{
        source: [ ... ]
    }, {
        transform: {
            type: 'filter',
            config: { ... }
            print: true
        }
    }],
    ...
}

設定為 true 後， transform 的結果，會被 console.log 列印出來。

資料轉換器“排序”還具有一些附加功能：可以將多個維度一起排序。請參見下面的範例。整理如下：預設值是按數值排序。其中，“可轉換為數值的字串”也被轉換為數值，並與其他數值一起按大小排序。其他“無法轉換為數值的字串”也可以按字串排序。此功能在這種情況下很有用：具有相同標記的資料項被分組在一起，特別是當多個維度被排序在一起時。

option = {
    dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
    }, {
        transform: {
            type: 'sort',
            config: [
                // 對兩個維度按宣告的優先順序分別排序。
                { dimension: 'profession', order: 'desc' },
                { dimension: 'score', order: 'desc' }
            ]
        }
    }],
    series: {
        type: 'bar',
        datasetIndex: 1
    },
    ...
};

當對“數值和可以轉換為數值的字串”和“不能轉換為數值”進行排序時，或者當它們與“其他型別的值”進行比較時，它們不知道如何比較自己。然後我們將“後者”稱為“不可比”，並可以設定不可比：'min'|'max'，以指定“不可比較”在該比較中是最大還是最小，以便它們可以產生比較結果。例如，此設定的目的是確定空值（如null、undefined、NaN、“”、“-”）是否位於排序的開始或結束。

type SortTransform = {
    type: 'filter';
    config: OrderExpression | OrderExpression[];
};
type OrderExpression = {
    dimension: DimensionName | DimensionIndex;
    order: 'asc' | 'desc';
    incomparable?: 'min' | 'max';
    parser?: 'time' | 'trim' | 'number';
};
type DimensionName = string;
type DimensionIndex = number;

filter：可以使用'time'|'trim'|'number'，就像在資料轉換器“filter”中一樣。如果要對時間進行排序（例如，值是JSDate範例或時間字串，如“2012-03-12 11:13:54”），我們需要宣告解析器：“time”。如果我們需要對字尾值進行排序（例如“33%”、“16px”），我們需要宣告parser:'number'。

dataZoom

dataZoom元件用於在軸上執行“資料視窗縮放”和“資料視窗平移”操作。可以使用dataZoom xAxisIndex或dataZoom YAxisIndex指定dataZoom控制元件的一個或多個數位軸。同時可以有多個dataZoom元件，這些元件起到共同控制的作用。控制相同編號軸的元件將自動連結。下面的範例將詳細解釋。 dataZoom的工作原理是通過“資料過濾”來達到“資料視窗縮放”的效果。資料過濾模式的不同設定具有不同的效果。dataZoom。過濾器模式。目前，dataZoom支援兩種型別的資料視窗範圍設定：百分比形式：dataZoomStart和dataZoom.end。絕對數位形式：dataZoomStartValue和dataZoom.endValue。

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 這個dataZoom元件，預設控制x軸。
            type: 'slider', // 這個 dataZoom 元件是 slider 型 dataZoom 元件
            start: 10,      // 左邊在 10% 的位置。
            end: 60         // 右邊在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 這是個『散點圖』
            itemStyle: {
                opacity: 0.8
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

除了圖表之外，ApacheEChartsTM還提供了許多互動式元件。例如：圖例元件圖例、標題元件、視覺化對映元件visualMap、資料區域縮放元件dataZoom、時間軸元件。除了圖表之外，ApacheEChartsTM還提供了許多互動式元件。例如：圖例元件圖例、標題元件、視覺化對映元件visualMap、資料區域縮放元件dataZoom、時間軸元件。

以上就是ECharts transform資料轉換和dataZoom在專案中使用的詳細內容，更多關於ECharts transform資料轉換的資料請關注it145.com其它相關文章！

ECharts transform資料轉換和dataZoom在專案中使用

目錄

transform 進行資料轉換

dataZoom

熱門文章