ECharts滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）

dataZoom[i]-slider

滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）

（參考數(shù)據(jù)區(qū)域縮放組件（dataZoom）的介紹）

dataZoom[i]-slider.type   |   string

[ default: 'slider' ]

滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件的類型。

dataZoom[i]-slider.show   |   boolean

[ default: true ]

是否顯示 dataZoomSlider 組件。如果設(shè)置為 false，不會(huì)顯示，但是數(shù)據(jù)過濾的功能還存在。

dataZoom[i]-slider.backgroundColor   |   Color

[ default: 'rgba(47,69,84,0)' ]

設(shè)置 dataZoomSlider 組件的背景顏色。

dataZoom[i]-slider.dataBackground   |   Object

設(shè)置 dataZoomSlider 組件的數(shù)據(jù)陰影的樣式。更多設(shè)置參考：dataZoomSlider組件數(shù)據(jù)陰影的線條樣式 和 dataZoomSlider組件數(shù)據(jù)陰影的填充樣式。

dataZoom[i]-slider.fillerColor   |   Color

[ default: 'rgba(167,183,204,0.4)' ]

dataZoomSlider 組件中選中范圍的填充顏色。

dataZoom[i]-slider.borderColor   |   Color

[ default: '#ddd' ]

設(shè)置 dataZoomSlider 組件的邊框顏色。

dataZoom[i]-slider.handleIcon   |   string

手柄的 icon 形狀，支持路徑字符串，默認(rèn)為：

'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'

可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

自定義 icon 見 示例 area-simple

dataZoom[i]-slider.handleSize   |   number

[ default: '100%' ]

控制手柄的尺寸，可以是像素大小，也可以是相對(duì)于 dataZoom 組件寬度的百分比，默認(rèn)跟 dataZoom 寬度相同。

dataZoom[i]-slider.handleStyle   |   Object

ECharts 滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件中手柄的樣式配置，見 示例 area-simple。

更多關(guān)于手柄樣式設(shè)置的操作見：dataZoomSlider組件的手柄樣式

dataZoom[i]-slider.labelPrecision   |   number

[ default: 'auto' ]

顯示 label 的小數(shù)精度。默認(rèn)根據(jù)數(shù)據(jù)自動(dòng)決定。

dataZoom[i]-slider.labelFormatter   |   string, Function

[ default: null ]

顯示的 label 的格式化器。

• 如果為 string，表示模板，例如：aaaa{value}bbbb，其中{value}會(huì)被替換為實(shí)際的數(shù)值。
• 如果為 Function，表示回調(diào)函數(shù)，例如：

/** * @param {*} value 如果 axis.type 為 'category'，則 `value` 為 axis.data 的 index。 *                  否則 `value` 是當(dāng)前值。 * @param {strign} valueStr 內(nèi)部格式化的結(jié)果。 * @return {string} 返回最終的label內(nèi)容。 */labelFormatter: function (value) {
    return 'aaa' + value + 'bbb';
}

dataZoom[i]-slider.showDetail   |   boolean

[ default: true ]

是否顯示 detail，即拖拽時(shí)候顯示詳細(xì)數(shù)值信息。

dataZoom[i]-slider.showDataShadow   |   string

[ default: 'auto' ]

是否在 dataZoom-silder 組件中顯示數(shù)據(jù)陰影。數(shù)據(jù)陰影可以簡(jiǎn)單地反應(yīng)數(shù)據(jù)走勢(shì)。

dataZoom[i]-slider.realtime   |   boolean

[ default: true ]

拖動(dòng)時(shí)，是否實(shí)時(shí)更新系列的視圖。如果設(shè)置為 false，則只在拖拽結(jié)束的時(shí)候更新。

dataZoom[i]-slider.textStyle   |   *

設(shè)置 dataZoomSlider 組件的文本樣式。更多文本樣式設(shè)置見：dataZoomSlider組件的文字樣式。

dataZoom[i]-slider.xAxisIndex   |   number, Array

[ default: null ]

設(shè)置 dataZoom-slider 組件控制的 x軸（即 xAxis，是直角坐標(biāo)系中的概念，參見 grid）。

不指定時(shí)，當(dāng) dataZoom-slider.orient 為 'horizontal' 時(shí)，默認(rèn)控制和 dataZoom 平行的第一個(gè) xAxis。但是不建議使用默認(rèn)值，建議顯式指定。

如果是 number 表示控制一個(gè)軸，如果是 Array 表示控制多個(gè)軸。

例如有如下 ECharts option：

option: {
    xAxis: [
        {...}, // 第一個(gè) xAxis
        {...}, // 第二個(gè) xAxis
        {...}, // 第三個(gè) xAxis
        {...}  // 第四個(gè) xAxis
    ],
    dataZoom: [
        { // 第一個(gè) dataZoom 組件
            xAxisIndex: [0, 2] // 表示這個(gè) dataZoom 組件控制 第一個(gè) 和 第三個(gè) xAxis
        },
        { // 第二個(gè) dataZoom 組件
            xAxisIndex: 3      // 表示這個(gè) dataZoom 組件控制 第四個(gè) xAxis
        }
    ]
}

dataZoom[i]-slider.yAxisIndex   |   number, Array

[ default: null ]

設(shè)置 dataZoom-slider 組件控制的 y 軸（即 yAxis，是直角坐標(biāo)系中的概念，參見 grid）。

不指定時(shí)，當(dāng) dataZoom-slider.orient 為 'vertical' 時(shí)，默認(rèn)控制和 dataZoom 平行的第一個(gè) yAxis。但是不建議使用默認(rèn)值，建議顯式指定。

如果是 number 表示控制一個(gè)軸，如果是 Array 表示控制多個(gè)軸。

例如有如下 ECharts option：

option: {
    yAxis: [
        {...}, // 第一個(gè) yAxis
        {...}, // 第二個(gè) yAxis
        {...}, // 第三個(gè) yAxis
        {...}  // 第四個(gè) yAxis
    ],
    dataZoom: [
        { // 第一個(gè) dataZoom 組件
            yAxisIndex: [0, 2] // 表示這個(gè) dataZoom 組件控制 第一個(gè) 和 第三個(gè) yAxis
        },
        { // 第二個(gè) dataZoom 組件
            yAxisIndex: 3      // 表示這個(gè) dataZoom 組件控制 第四個(gè) yAxis
        }
    ]
}

dataZoom[i]-slider.radiusAxisIndex   |   number, Array

[ default: null ]

設(shè)置 dataZoom-slider 組件控制的 radius 軸（即 radiusAxis，是直角坐標(biāo)系中的概念，參見 polar）。

如果是 number 表示控制一個(gè)軸，如果是 Array 表示控制多個(gè)軸。

例如有如下 ECharts option：

option: {
    radiusAxis: [
        {...}, // 第一個(gè) radiusAxis
        {...}, // 第二個(gè) radiusAxis
        {...}, // 第三個(gè) radiusAxis
        {...}  // 第四個(gè) radiusAxis
    ],
    dataZoom: [
        { // 第一個(gè) dataZoom 組件
            radiusAxisIndex: [0, 2] // 表示這個(gè) dataZoom 組件控制 第一個(gè) 和 第三個(gè) radiusAxis
        },
        { // 第二個(gè) dataZoom 組件
            radiusAxisIndex: 3      // 表示這個(gè) dataZoom 組件控制 第四個(gè) radiusAxis
        }
    ]
}

dataZoom[i]-slider.angleAxisIndex   |   number, Array

[ default: null ]

設(shè)置 dataZoom-slider 組件控制的 angle 軸（即 angleAxis，是直角坐標(biāo)系中的概念，參見 polar）。

如果是 number 表示控制一個(gè)軸，如果是 Array 表示控制多個(gè)軸。

例如有如下 ECharts option：

option: {
    angleAxis: [
        {...}, // 第一個(gè) angleAxis
        {...}, // 第二個(gè) angleAxis
        {...}, // 第三個(gè) angleAxis
        {...}  // 第四個(gè) angleAxis
    ],
    dataZoom: [
        { // 第一個(gè) dataZoom 組件
            angleAxisIndex: [0, 2] // 表示這個(gè) dataZoom 組件控制 第一個(gè) 和 第三個(gè) angleAxis
        },
        { // 第二個(gè) dataZoom 組件
            angleAxisIndex: 3      // 表示這個(gè) dataZoom 組件控制 第四個(gè) angleAxis
        }
    ]
}

dataZoom[i]-slider.filterMode   |   string

[ default: 'filter' ]

dataZoom 的運(yùn)行原理是通過 數(shù)據(jù)過濾 來達(dá)到 數(shù)據(jù)窗口縮放 的效果。數(shù)據(jù)過濾模式的設(shè)置不同，效果也不同。

可選值為：

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

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

• 當(dāng)『只有 X 軸 或 只有 Y 軸受 dataZoom 組件控制』時(shí)，常使用 filterMode: 'filter'，這樣能使另一個(gè)軸自適應(yīng)過濾后的數(shù)值范圍。
• 當(dāng)『X 軸 Y 軸分別受 dataZoom 組件控制』時(shí)：1、如果 X 軸和 Y 軸是『同等地位的、不應(yīng)互相影響的』，比如在『雙數(shù)值軸散點(diǎn)圖』中，那么兩個(gè)軸可都設(shè)為 fiterMode: 'empty'。2、如果 X 軸為主，Y 軸為輔，比如在『柱狀圖』中，需要『拖動(dòng) dataZoomX 改變 X 軸過濾柱子時(shí)，Y 軸的范圍也自適應(yīng)剩余柱子的高度』，『拖動(dòng) dataZoomY 改變 Y 軸過濾柱子時(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)被過濾掉，因?yàn)?90 在 dataWindow 之外。
    [3, 9, 27]
    // [1, 11, 111] 整項(xiàng)被過濾掉，因?yàn)?1 在 dataWindow 之外。
]

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

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

再從頭來，上例中 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 軸還有占位，只是不顯示出來）。最終得到的 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）過濾功能，比較清晰。

如下面的例子：

點(diǎn)擊編輯實(shí)例 》》

dataZoom[i]-slider.start   |   number

[ default: 0 ]

數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100，表示 0% ~ 100%。

dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定義了數(shù)據(jù)窗口范圍。

dataZoom[i]-slider.end   |   number

[ default: 100 ]

數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。

dataZoom-slider.start 和 dataZoom-slider.end 共同用百分比的形式定義了數(shù)據(jù)窗口范圍。

dataZoom[i]-slider.startValue   |   number, string, Date

[ default: null ]

數(shù)據(jù)窗口范圍的起始數(shù)值。如果設(shè)置了 dataZoom-slider.start 則 startValue 失效。

dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 絕對(duì)數(shù)值 的形式定義了數(shù)據(jù)窗口范圍。

注意，如果軸的類型為 category，則 startValue 既可以設(shè)置為 axis.data 數(shù)組的 index，也可以設(shè)置為數(shù)組值本身。 但是如果設(shè)置為數(shù)組值本身，會(huì)在內(nèi)部自動(dòng)轉(zhuǎn)化為數(shù)組的 index。

dataZoom[i]-slider.endValue   |   number, string, Date

[ default: null ]

數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。如果設(shè)置了 dataZoom-slider.end 則 endValue 失效。

dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 絕對(duì)數(shù)值 的形式定義了數(shù)據(jù)窗口范圍。

注意，如果軸的類型為 category，則 endValue 即可以設(shè)置為 axis.data 數(shù)組的 index，也可以設(shè)置為數(shù)組值本身。 但是如果設(shè)置為數(shù)組值本身，會(huì)在內(nèi)部自動(dòng)轉(zhuǎn)化為數(shù)組的 index。

dataZoom[i]-slider.minSpan   |   number

[ default: null ]

用于限制窗口大小的最小值（百分比值），取值范圍是 0 ~ 100。

如果設(shè)置了 dataZoom-slider.minValueSpan 則 minSpan 失效。

dataZoom[i]-slider.maxSpan   |   number

[ default: null ]

用于限制窗口大小的最大值（百分比值），取值范圍是 0 ~ 100。

如果設(shè)置了 dataZoom-slider.maxValueSpan 則 maxSpan 失效。

dataZoom[i]-slider.minValueSpan   |   number, string, Date

[ default: null ]

用于限制窗口大小的最小值（實(shí)際數(shù)值）。

如在時(shí)間軸上可以設(shè)置為：3600 * 24 * 1000 * 5 表示 5 天。 在類目軸上可以設(shè)置為 5 表示 5 個(gè)類目。

dataZoom[i]-slider.maxValueSpan   |   number, string, Date

[ default: null ]

用于限制窗口大小的最大值（實(shí)際數(shù)值）。

如在時(shí)間軸上可以設(shè)置為：3600 * 24 * 1000 * 5 表示 5 天。 在類目軸上可以設(shè)置為 5 表示 5 個(gè)類目。

dataZoom[i]-slider.orient   |   string

[ default: null ]

決定布局方式是橫還是豎。不僅是布局方式，對(duì)于直角坐標(biāo)系而言，也決定了，缺省情況控制橫向數(shù)軸還是縱向數(shù)軸。

可選值為：

• 'horizontal'：水平。
• 'vertical'：豎直。

dataZoom[i]-slider.zoomLock   |   boolean

[ default: false ]

是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小。

如果設(shè)置為 true 則鎖定選擇區(qū)域的大小，也就是說，只能平移，不能縮放。

dataZoom[i]-slider.throttle   |   number

[ default: 100 ]

設(shè)置觸發(fā)視圖刷新的頻率。單位為毫秒（ms）。

如果 animation 設(shè)為 true 且 animationDurationUpdate 大于 0，可以保持 throttle 為默認(rèn)值 100（或者設(shè)置為大于 0 的值），否則拖拽時(shí)有可能畫面感覺卡頓。

如果 animation 設(shè)為 false 或者 animationDurationUpdate 設(shè)為 0，且在數(shù)據(jù)量不大時(shí)，拖拽時(shí)畫面感覺卡頓，可以把嘗試把 throttle 設(shè)為 0 來改善。

dataZoom[i]-slider.rangeMode   |   Array

例如 rangeMode: ['value', 'percent']，表示 start 值取絕對(duì)數(shù)值，end 取百分比。

可選值為：'value', 'percent'

dataZoom[i]-slider.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

dataZoom[i]-slider.z   |   number

[ default: 2 ]

組件的所有圖形的 z 值?？刂茍D形的前后順序。z 值小的圖形會(huì)被z值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。

dataZoom[i]-slider.left   |   string, number

[ default: 'auto' ]

dataZoom-slider 組件離容器左側(cè)的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

dataZoom[i]-slider.top   |   string, number

[ default: 'auto' ]

dataZoom-slider 組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

dataZoom[i]-slider.right   |   string, number

[ default: 'auto' ]

dataZoom-slider 組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

默認(rèn)自適應(yīng)。

dataZoom[i]-slider.bottom   |   string, number

[ default: 'auto' ]

dataZoom-slider 組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

默認(rèn)自適應(yīng)。