如何使用dataZoom組件

dataZoom[i]

dataZoom 組件用于區(qū)域縮放，達到能自由關注細節(jié)的數(shù)據(jù)信息，或者概覽數(shù)據(jù)整體，或者去除離群點的影響。

以下是目前支持的幾種 dataZoom 組件：

• 內置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內置于坐標系中，使用戶可以在坐標系上通過鼠標拖拽、鼠標滾輪、手指滑動（觸屏上）來縮放或漫游坐標系。
• 滑動條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨的滑動條，用戶在滑動條上進行縮放或漫游。
• 框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：提供一個選框進行數(shù)據(jù)區(qū)域縮放。即 toolbox.feature.dataZoom，配置項在 toolbox 中。

如下例子：

點擊編輯實例 》》

dataZoom 與數(shù)軸間的關系 

dataZoom 主要是對數(shù)軸（axis）進行操作（控制數(shù)軸的顯示范圍，或稱窗口（window））。

可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 來指定 dataZoom 控制哪個或哪些數(shù)軸。

dataZoom 組件可同時存在多個，起到共同控制的作用。如果多個 dataZoom 組件共同控制同一個數(shù)軸，他們會自動聯(lián)動。

dataZoom 組件如何影響軸和數(shù)據(jù)

dataZoom 的運行原理是通過數(shù)據(jù)過濾以及在內部設置軸的顯示窗口來達到數(shù)據(jù)窗口縮放的效果。

數(shù)據(jù)過濾模式（dataZoom.filterMode）的設置不同，效果也不同。

可選值為：

• 'filter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被過濾掉。即會影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只要有一個維度在數(shù)據(jù)窗口外，整個數(shù)據(jù)項就會被過濾掉。
• 'weakFilter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被過濾掉。即會影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只有當全部維度都在數(shù)據(jù)窗口同側外部，整個數(shù)據(jù)項才會被過濾掉。
• 'empty'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被設置為空。即不會影響其他軸的數(shù)據(jù)范圍。
• 'none': 不過濾數(shù)據(jù)，只改變數(shù)軸范圍。

如何設置，由用戶根據(jù)場景和需求自己決定。經(jīng)驗來說：

• 當『只有 X 軸或只有 Y 軸受 dataZoom 組件控制』時，常使用 filterMode: 'filter'，這樣能使另一個軸自適應過濾后的數(shù)值范圍。
• 當『X 軸和Y 軸分別受 dataZoom 組件控制』時：
• 如果 X 軸和 Y 軸是『同等地位的、不應互相影響的』，比如在『雙數(shù)值軸散點圖』中，那么兩個軸可都設為 fiterMode: 'empty'。
• 如果 X 軸為主，Y 軸為輔，比如在『柱狀圖』中，需要『拖動 dataZoomX 改變 X 軸過濾柱子時，Y 軸的范圍也自適應剩余柱子的高度』，『拖動 dataZoomY 改變 Y 軸過濾柱子時，X 軸范圍不受影響』，那么就 X軸設為 fiterMode: 'filter'，Y 軸設為 fiterMode: 'empty'，即主軸 'filter'，輔軸 'empty'。

下面是個具體例子：

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: [
            // 第一列對應 X 軸，第二列對應 Y 軸。
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}

上例中，dataZoomX 的 filterMode 設置為 'filter'。于是，假設當用戶拖拽 dataZoomX（不去動 dataZoomY）導致其 valueWindow 變?yōu)?nbsp;[2, 50] 時，dataZoomX 對 series.data 的第一列進行遍歷，窗口外的整項去掉，最終得到的 series.data 為：

[    // 第一列對應 X 軸，第二列對應 Y 軸。    [12, 24, 36],    // [90, 80, 70] 整項被過濾掉，因為 90 在 dataWindow 之外。    [3, 9, 27]    // [1, 11, 111] 整項被過濾掉，因為 1 在 dataWindow 之外。]

過濾前，series.data 中對應 Y 軸的值有 24、80、9、11，過濾后，只剩下 24 和 9，那么 Y 軸的顯示范圍就會自動改變以適應剩下的這兩個值的顯示（如果 Y 軸沒有被設置 min、max 固定其顯示范圍的話）。

所以，filterMode: 'filter' 的效果是：過濾數(shù)據(jù)后使另外的軸也能自動適應當前數(shù)據(jù)的范圍。

再從頭來，上例中 dataZoomY 的 filterMode 設置為 'empty'。于是，假設當用戶拖拽 dataZoomY（不去動 dataZoomX）導致其 dataWindow 變?yōu)?nbsp;[10, 60] 時，dataZoomY 對 series.data 的第二列進行遍歷，窗口外的值被設置為 empty （即替換為 NaN，這樣設置為空的項，其所對應柱形，在 X 軸還有占位，只是不顯示出來）。最終得到的 series.data 為：

[
    // 第一列對應 X 軸，第二列對應 Y 軸。
    [12, 24, 36],
    [90, NaN, 70], // 設置為 empty (NaN)
    [3, NaN, 27],  // 設置為 empty (NaN)
    [1, 11, 111]
]

這時，series.data 中對應于 X 軸的值仍然全部保留不受影響，為 12、90、3、1。那么用戶對 dataZoomY 的拖拽操作不會影響到 X 軸的范圍。這樣的效果，對于離群點（outlier）過濾功能，比較清晰。

如下面的例子：

點擊編輯實例 》》

另外，如果在任一個數(shù)軸上設置了 min、max（如設置 yAxis: {min: 0, max: 400}），那么這個數(shù)軸無論如何也不會被其他數(shù)軸的 dataZoom 行為影響了。

dataZoom 數(shù)據(jù)窗口的設置

dataZoom 的數(shù)據(jù)窗口范圍的設置，目前支持兩種形式：

• 百分比形式：即設置 dataZoom.start 和 dataZoom.end。
• 絕對數(shù)值形式：即設置 dataZoom.startValue 和 dataZoom.endValue。

注意：當使用百分比形式指定 dataZoom 范圍時，且處于如下場景（或類似場景）中，dataZoom 的結果是和 dataZoom 組件的定義順序相關的。

option = {
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter', // 設定為 'filter' 從而 X 的窗口變化會影響 Y 的范圍。
            start: 30,
            end: 70
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty',
            start: 20,
            end: 80
        }
    ],
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
        // yAxis 中并沒有使用 min、max 來顯示限定軸的顯示范圍。
    },
    series{
        type: 'bar',
        data: [
            // 第一列對應 X 軸，第二列對應 Y 軸。
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}

我們對上例中 dataZoomY 的 start: 20, end: 80 所表示意思做出如下的解釋：

• 如果 yAxis.min、yAxis.max 進行了直接設置：那么 dataZoomY 的 start: 20, end: 80 表示 yAxis.min ~ yAxis.max 的 20% 到 80%。
• 如果 yAxis.min、yAxis.max 沒有設置：
• 如果 dataZoomX 設置為 filterMode: 'empty'：那么 dataZoomY 的 start: 20, end: 80 表示 series.data 中 dataMinY ~ dataMaxY（即上例中的 9 ~ 80）的 20% 到 80%。
• 如果 dataZoomX 設置為 filterMode: 'filter'：那么，因為 dataZoomX 定義 dataZoomY 組件之前，所以 dataZoomX 的 start: 30, end: 70 表示全部數(shù)據(jù)的 30% 到 70%，而 dataZoomY 組件的 start: 20, end: 80 表示經(jīng)過 dataZoomX 過濾處理后，所得數(shù)據(jù)集的 20% 到 80%。
• 如果需要改變這種處理順序，那么改變 dataZoomX 和 dataZoomY 在 option 中的出現(xiàn)順序即可。