欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用

 更新時(shí)間：2022年12月23日 15:06:31   作者：黎燃  
這篇文章主要為大家介紹了ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

transform 進(jìn)行數(shù)據(jù)轉(zhuǎn)換

數(shù)據(jù)轉(zhuǎn)換是這樣一個(gè)公式：outData=f（inputData）。F是轉(zhuǎn)換方法，例如filter、sort、region、boxplot、cluster、aggregate（todo）等。有了數(shù)據(jù)轉(zhuǎn)換功能，我們至少可以做到以下幾點(diǎn)： 將數(shù)據(jù)分成多個(gè)部分，并在不同的餅圖中顯示它們。 執(zhí)行一些數(shù)據(jù)統(tǒng)計(jì)操作并顯示結(jié)果。 使用一些數(shù)據(jù)可視化算法來處理數(shù)據(jù)并顯示結(jié)果。 數(shù)據(jù)排序。 刪除或直接選擇數(shù)據(jù)項(xiàng)。

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

在大多數(shù)情況下，轉(zhuǎn)換只需要輸出一個(gè)數(shù)據(jù)。然而，也有一些場(chǎng)景需要輸出多個(gè)數(shù)據(jù)，每個(gè)數(shù)據(jù)可以由不同的系列或數(shù)據(jù)集使用。 例如，在內(nèi)置的“boxplot”轉(zhuǎn)換中，除了boxplot系列所需的數(shù)據(jù)外，還將生成異常值，并可以使用散點(diǎn)圖系列進(jìn)行顯示。例如 我們提供配置數(shù)據(jù)集FromTransformResult，例如：

option: {
    dataset: [{
        source: [ ... ] // 原始數(shù)據(jù)
    }, {
        // 幾個(gè) transform 被聲明成 array ，他們構(gòu)成了一個(gè)鏈，
        // 前一個(gè) transform 的輸出是后一個(gè) transform 的輸入。
        transform: [{
            type: 'filter',
            config: { dimension: 'Product', value: 'Tofu' }
        }, {
            type: 'sort',
            config: { dimension: 'Year', order: 'desc' }
        }]
    }],
    series: {
        type: 'pie',
        // 這個(gè)系列引用上述 transform 的結(jié)果。
        datasetIndex: 1
    }
}

當(dāng)使用轉(zhuǎn)換時(shí)，有時(shí)我們將無法顯示結(jié)果，而且我們不知道哪里出了問題。因此，這里提供了一個(gè)配置項(xiàng)轉(zhuǎn)換。打印方便調(diào)試。此配置項(xiàng)僅在開發(fā)環(huán)境中生效。

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

配置為 true 后， transform 的結(jié)果，會(huì)被 console.log 打印出來。

數(shù)據(jù)轉(zhuǎn)換器“排序”還具有一些附加功能： 可以將多個(gè)維度一起排序。請(qǐng)參見下面的示例。 整理如下： 默認(rèn)值是按數(shù)值排序。其中，“可轉(zhuǎn)換為數(shù)值的字符串”也被轉(zhuǎn)換為數(shù)值，并與其他數(shù)值一起按大小排序。 其他“無法轉(zhuǎn)換為數(shù)值的字符串”也可以按字符串排序。此功能在這種情況下很有用：具有相同標(biāo)記的數(shù)據(jù)項(xiàng)被分組在一起，特別是當(dāng)多個(gè)維度被排序在一起時(shí)。

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: [
                // 對(duì)兩個(gè)維度按聲明的優(yōu)先級(jí)分別排序。
                { dimension: 'profession', order: 'desc' },
                { dimension: 'score', order: 'desc' }
            ]
        }
    }],
    series: {
        type: 'bar',
        datasetIndex: 1
    },
    ...
};

當(dāng)對(duì)“數(shù)值和可以轉(zhuǎn)換為數(shù)值的字符串”和“不能轉(zhuǎn)換為數(shù)值”進(jìn)行排序時(shí)，或者當(dāng)它們與“其他類型的值”進(jìn)行比較時(shí)，它們不知道如何比較自己。然后我們將“后者”稱為“不可比”，并可以設(shè)置不可比：'min'|'max'，以指定“不可比較”在該比較中是最大還是最小，以便它們可以產(chǎn)生比較結(jié)果。例如，此設(shè)置的目的是確定空值（如null、undefined、NaN、“”、“-”）是否位于排序的開始或結(jié)束。

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'，就像在數(shù)據(jù)轉(zhuǎn)換器“filter”中一樣。 如果要對(duì)時(shí)間進(jìn)行排序（例如，值是JSDate實(shí)例或時(shí)間字符串，如“2012-03-12 11:13:54”），我們需要聲明解析器：“time”。 如果我們需要對(duì)后綴值進(jìn)行排序（例如“33%”、“16px”），我們需要聲明parser:'number'。

dataZoom

dataZoom組件用于在軸上執(zhí)行“數(shù)據(jù)窗口縮放”和“數(shù)據(jù)窗口平移”操作。 可以使用dataZoom xAxisIndex或dataZoom YAxisIndex指定dataZoom控件的一個(gè)或多個(gè)數(shù)字軸。 同時(shí)可以有多個(gè)dataZoom組件，這些組件起到共同控制的作用。控制相同編號(hào)軸的組件將自動(dòng)鏈接。下面的示例將詳細(xì)解釋。 dataZoom的工作原理是通過“數(shù)據(jù)過濾”來達(dá)到“數(shù)據(jù)窗口縮放”的效果。 數(shù)據(jù)過濾模式的不同設(shè)置具有不同的效果。dataZoom。過濾器模式。 目前，dataZoom支持兩種類型的數(shù)據(jù)窗口范圍設(shè)置： 百分比形式：dataZoomStart和dataZoom.end。 絕對(duì)數(shù)字形式：dataZoomStartValue和dataZoom.endValue。

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
            type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
            start: 10,      // 左邊在 10% 的位置。
            end: 60         // 右邊在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 這是個(gè)『散點(diǎn)圖』
            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還提供了許多交互式組件。例如： 圖例組件圖例、標(biāo)題組件、可視化映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom、時(shí)間軸組件。 除了圖表之外，ApacheEChartsTM還提供了許多交互式組件。例如： 圖例組件圖例、標(biāo)題組件、可視化映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom、時(shí)間軸組件。

以上就是ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用的詳細(xì)內(nèi)容，更多關(guān)于ECharts transform數(shù)據(jù)轉(zhuǎn)換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論