ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用
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ù)可視化算法來(lái)處理數(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í)我們將無(wú)法顯示結(jié)果,而且我們不知道哪里出了問(wèn)題。因此,這里提供了一個(gè)配置項(xiàng)轉(zhuǎn)換。打印方便調(diào)試。此配置項(xiàng)僅在開(kāi)發(fā)環(huán)境中生效。
option = { dataset: [{ source: [ ... ] }, { transform: { type: 'filter', config: { ... } print: true } }], ... }
配置為 true
后, transform 的結(jié)果,會(huì)被 console.log 打印出來(lái)。
數(shù)據(jù)轉(zhuǎn)換器“排序”還具有一些附加功能: 可以將多個(gè)維度一起排序。請(qǐng)參見(jiàn)下面的示例。 整理如下: 默認(rèn)值是按數(shù)值排序。其中,“可轉(zhuǎn)換為數(shù)值的字符串”也被轉(zhuǎn)換為數(shù)值,并與其他數(shù)值一起按大小排序。 其他“無(wú)法轉(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)它們與“其他類(lèi)型的值”進(jìn)行比較時(shí),它們不知道如何比較自己。然后我們將“后者”稱(chēng)為“不可比”,并可以設(shè)置不可比:'min'|'max',以指定“不可比較”在該比較中是最大還是最小,以便它們可以產(chǎn)生比較結(jié)果。例如,此設(shè)置的目的是確定空值(如null、undefined、NaN、“”、“-”)是否位于排序的開(kāi)始或結(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的工作原理是通過(guò)“數(shù)據(jù)過(guò)濾”來(lái)達(dá)到“數(shù)據(jù)窗口縮放”的效果。 數(shù)據(jù)過(guò)濾模式的不同設(shè)置具有不同的效果。dataZoom。過(guò)濾器模式。 目前,dataZoom支持兩種類(lèi)型的數(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)文章!
- 前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理
- ECharts Canvas渲染在SVG合理運(yùn)用
- ECharts框架分段視覺(jué)映射在移動(dòng)端適配
- ECharts的三維可視化及在微信小程序中使用示例
- ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- 微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
- ECharts圖表使用及異步加載的特性示例詳解
相關(guān)文章
前端通過(guò)JavaScript創(chuàng)建修改CAD圖形詳情
這篇文章介紹JavaScript創(chuàng)建修改CAD圖形,創(chuàng)建修改CAD圖形,一般是基于AutoCAD進(jìn)行二次開(kāi)發(fā),ObjectARX是AutoDesk公司針對(duì)AutoCAD平臺(tái)上的二次開(kāi)發(fā)而推出的一個(gè)開(kāi)發(fā)軟件包,它提供了以C++為基礎(chǔ)的面向?qū)ο蟮拈_(kāi)發(fā)環(huán)境及應(yīng)用程序接口,能真正快速的訪問(wèn)AutoCAD圖形數(shù)據(jù)庫(kù)2021-10-10JavaScript設(shè)計(jì)模式之單例模式應(yīng)用場(chǎng)景案例詳解
這篇文章主要為大家介紹了JavaScript中單例模式的應(yīng)用場(chǎng)景案例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js)
這篇文章主要為大家介紹了websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07微信小程序 判斷手機(jī)號(hào)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 判斷手機(jī)號(hào)的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04詳解微信小程序入門(mén)從這里出發(fā)(登錄注冊(cè)、開(kāi)發(fā)工具、文件及結(jié)構(gòu)介紹)
這篇文章主要介紹了微信小程序入門(mén)從這里出發(fā)(登錄注冊(cè)、開(kāi)發(fā)工具、文件及結(jié)構(gòu)介紹),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07