建站
咨詢
售后
建站咨詢
新聞中心
dataZoom[i]
dataZoom 組件用于區(qū)域縮放，達(dá)到能自由關(guān)注細(xì)節(jié)的數(shù)據(jù)信息，或者概覽數(shù)據(jù)整體，或者去除離群點(diǎn)的影響。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、南澳網(wǎng)絡(luò)推廣、微信小程序、南澳網(wǎng)絡(luò)營(yíng)銷(xiāo)、南澳企業(yè)策劃、南澳品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供南澳建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
以下是目前支持的幾種 dataZoom 組件：
- 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內(nèi)置于坐標(biāo)系中，使用戶可以在坐標(biāo)系上通過(guò)鼠標(biāo)拖拽、鼠標(biāo)滾輪、手指滑動(dòng)（觸屏上）來(lái)縮放或漫游坐標(biāo)系。
- 滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨(dú)的滑動(dòng)條，用戶在滑動(dòng)條上進(jìn)行縮放或漫游。
- 框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：提供一個(gè)選框進(jìn)行數(shù)據(jù)區(qū)域縮放。即 toolbox.feature.dataZoom，配置項(xiàng)在 toolbox 中。
如下例子：
點(diǎn)擊編輯實(shí)例 》》
dataZoom 與數(shù)軸間的關(guān)系
dataZoom 主要是對(duì)數(shù)軸（axis）進(jìn)行操作（控制數(shù)軸的顯示范圍，或稱窗口（window））。
可以通過(guò) dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 來(lái)指定 dataZoom 控制哪個(gè)或哪些數(shù)軸。
dataZoom 組件可同時(shí)存在多個(gè)，起到共同控制的作用。如果多個(gè) dataZoom 組件共同控制同一個(gè)數(shù)軸，他們會(huì)自動(dòng)聯(lián)動(dòng)。
dataZoom 組件如何影響軸和數(shù)據(jù)
dataZoom 的運(yùn)行原理是通過(guò)數(shù)據(jù)過(guò)濾以及在內(nèi)部設(shè)置軸的顯示窗口來(lái)達(dá)到數(shù)據(jù)窗口縮放的效果。
數(shù)據(jù)過(guò)濾模式（dataZoom.filterMode）的設(shè)置不同，效果也不同。
可選值為：
- 'filter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被過(guò)濾掉。即會(huì)影響其他軸的數(shù)據(jù)范圍。每個(gè)數(shù)據(jù)項(xiàng)，只要有一個(gè)維度在數(shù)據(jù)窗口外，整個(gè)數(shù)據(jù)項(xiàng)就會(huì)被過(guò)濾掉。
- 'weakFilter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被過(guò)濾掉。即會(huì)影響其他軸的數(shù)據(jù)范圍。每個(gè)數(shù)據(jù)項(xiàng)，只有當(dāng)全部維度都在數(shù)據(jù)窗口同側(cè)外部，整個(gè)數(shù)據(jù)項(xiàng)才會(huì)被過(guò)濾掉。
- 'empty'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被設(shè)置為空。即不會(huì)影響其他軸的數(shù)據(jù)范圍。
- 'none': 不過(guò)濾數(shù)據(jù)，只改變數(shù)軸范圍。
如何設(shè)置，由用戶根據(jù)場(chǎng)景和需求自己決定。經(jīng)驗(yàn)來(lái)說(shuō)：
- 當(dāng)『只有 X 軸或只有 Y 軸受 dataZoom 組件控制』時(shí)，常使用 filterMode: 'filter'，這樣能使另一個(gè)軸自適應(yīng)過(guò)濾后的數(shù)值范圍。
- 當(dāng)『X 軸和Y 軸分別受 dataZoom 組件控制』時(shí)：
- 如果 X 軸和 Y 軸是『同等地位的、不應(yīng)互相影響的』，比如在『雙數(shù)值軸散點(diǎn)圖』中，那么兩個(gè)軸可都設(shè)為 fiterMode: 'empty'。
- 如果 X 軸為主，Y 軸為輔，比如在『柱狀圖』中，需要『拖動(dòng) dataZoomX 改變 X 軸過(guò)濾柱子時(shí)，Y 軸的范圍也自適應(yīng)剩余柱子的高度』，『拖動(dòng) dataZoomY 改變 Y 軸過(guò)濾柱子時(shí)，X 軸范圍不受影響』，那么就 X軸設(shè)為 fiterMode: 'filter'，Y 軸設(shè)為 fiterMode: 'empty'，即主軸 'filter'，輔軸 'empty'。
下面是個(gè)具體例子：
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// 第一列對(duì)應(yīng) X 軸，第二列對(duì)應(yīng) Y 軸。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}上例中，dataZoomX 的 filterMode 設(shè)置為 'filter'。于是，假設(shè)當(dāng)用戶拖拽 dataZoomX（不去動(dòng) dataZoomY）導(dǎo)致其 valueWindow 變?yōu)?nbsp;[2, 50] 時(shí)，dataZoomX 對(duì) series.data 的第一列進(jìn)行遍歷，窗口外的整項(xiàng)去掉，最終得到的 series.data 為：
[ // 第一列對(duì)應(yīng) X 軸，第二列對(duì)應(yīng) Y 軸。 [12, 24, 36], // [90, 80, 70] 整項(xiàng)被過(guò)濾掉，因?yàn)?90 在 dataWindow 之外。 [3, 9, 27] // [1, 11, 111] 整項(xiàng)被過(guò)濾掉，因?yàn)?1 在 dataWindow 之外。]過(guò)濾前，series.data 中對(duì)應(yīng) Y 軸的值有 24、80、9、11，過(guò)濾后，只剩下 24 和 9，那么 Y 軸的顯示范圍就會(huì)自動(dòng)改變以適應(yīng)剩下的這兩個(gè)值的顯示（如果 Y 軸沒(méi)有被設(shè)置 min、max 固定其顯示范圍的話）。
所以，filterMode: 'filter' 的效果是：過(guò)濾數(shù)據(jù)后使另外的軸也能自動(dòng)適應(yīng)當(dāng)前數(shù)據(jù)的范圍。
再?gòu)念^來(lái)，上例中 dataZoomY 的 filterMode 設(shè)置為 'empty'。于是，假設(shè)當(dāng)用戶拖拽 dataZoomY（不去動(dòng) dataZoomX）導(dǎo)致其 dataWindow 變?yōu)?nbsp;[10, 60] 時(shí)，dataZoomY 對(duì) series.data 的第二列進(jìn)行遍歷，窗口外的值被設(shè)置為 empty （即替換為 NaN，這樣設(shè)置為空的項(xiàng)，其所對(duì)應(yīng)柱形，在 X 軸還有占位，只是不顯示出來(lái)）。最終得到的 series.data 為：
[
// 第一列對(duì)應(yīng) X 軸，第二列對(duì)應(yīng) Y 軸。
[12, 24, 36],
[90, NaN, 70], // 設(shè)置為 empty (NaN)
[3, NaN, 27], // 設(shè)置為 empty (NaN)
[1, 11, 111]
]這時(shí)，series.data 中對(duì)應(yīng)于 X 軸的值仍然全部保留不受影響，為 12、90、3、1。那么用戶對(duì) dataZoomY 的拖拽操作不會(huì)影響到 X 軸的范圍。這樣的效果，對(duì)于離群點(diǎn)（outlier）過(guò)濾功能，比較清晰。
如下面的例子：
點(diǎn)擊編輯實(shí)例 》》
另外，如果在任一個(gè)數(shù)軸上設(shè)置了 min、max（如設(shè)置 yAxis: {min: 0, max: 400}），那么這個(gè)數(shù)軸無(wú)論如何也不會(huì)被其他數(shù)軸的 dataZoom 行為影響了。
dataZoom 數(shù)據(jù)窗口的設(shè)置
dataZoom 的數(shù)據(jù)窗口范圍的設(shè)置，目前支持兩種形式：
- 百分比形式：即設(shè)置 dataZoom.start 和 dataZoom.end。
- 絕對(duì)數(shù)值形式：即設(shè)置 dataZoom.startValue 和 dataZoom.endValue。
注意：當(dāng)使用百分比形式指定 dataZoom 范圍時(shí)，且處于如下場(chǎng)景（或類似場(chǎng)景）中，dataZoom 的結(jié)果是和 dataZoom 組件的定義順序相關(guān)的。option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter', // 設(shè)定為 'filter' 從而 X 的窗口變化會(huì)影響 Y 的范圍。
start: 30,
end: 70
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
// yAxis 中并沒(méi)有使用 min、max 來(lái)顯示限定軸的顯示范圍。
},
series{
type: 'bar',
data: [
// 第一列對(duì)應(yīng) X 軸，第二列對(duì)應(yīng) Y 軸。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}我們對(duì)上例中 dataZoomY 的 start: 20, end: 80 所表示意思做出如下的解釋：
- 如果 yAxis.min、yAxis.max 進(jìn)行了直接設(shè)置：那么 dataZoomY 的 start: 20, end: 80 表示 yAxis.min ~ yAxis.max 的 20% 到 80%。
- 如果 yAxis.min、yAxis.max 沒(méi)有設(shè)置：
- 如果 dataZoomX 設(shè)置為 filterMode: 'empty'：那么 dataZoomY 的 start: 20, end: 80 表示 series.data 中 dataMinY ~ dataMaxY（即上例中的 9 ~ 80）的 20% 到 80%。
- 如果 dataZoomX 設(shè)置為 filterMode: 'filter'：那么，因?yàn)?nbsp;dataZoomX 定義 dataZoomY 組件之前，所以 dataZoomX 的 start: 30, end: 70 表示全部數(shù)據(jù)的 30% 到 70%，而 dataZoomY 組件的 start: 20, end: 80 表示經(jīng)過(guò) dataZoomX 過(guò)濾處理后，所得數(shù)據(jù)集的 20% 到 80%。
- 如果需要改變這種處理順序，那么改變 dataZoomX 和 dataZoomY 在 option 中的出現(xiàn)順序即可。
名稱欄目：創(chuàng)新互聯(lián)ECharts教程：如何使用dataZoom組件
瀏覽地址：http://www.dlmjj.cn/article/dhseoie.html
