ECharts內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）

dataZoom[i]-inside

內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）

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

所謂『內(nèi)置』，即內(nèi)置在坐標系中。

• 平移：在坐標系中滑動拖拽進行數(shù)據(jù)區(qū)域平移。
• 縮放：
• PC端：鼠標在坐標系范圍內(nèi)滾輪滾動（MAC觸控板類同）
• 移動端：在移動端觸屏上，支持兩指滑動縮放。

dataZoom[i]-inside.type   |   string

[ default: 'inside' ]

內(nèi)置型數(shù)據(jù)區(qū)域縮放組件類型

dataZoom[i]-inside.disabled   |   boolean

[ default: false ]

是否停止內(nèi)置型數(shù)據(jù)區(qū)域縮放組件的功能。

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

[ default: null ]

設置 dataZoom-inside 組件控制的 x 軸（即 xAxis，是直角坐標系中的概念，參見 grid）。

不指定時，當 dataZoom-inside.orient 為 'horizontal' 時，默認控制和 dataZoom 平行的第一個 xAxis。但是不建議使用默認值，建議顯式指定。

如果是 number 表示控制一個軸，如果是 Array 表示控制多個軸。

例如有如下 ECharts option：

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

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

[ default: null ]

設置 dataZoom-inside 組件控制的 y軸（即 yAxis，是直角坐標系中的概念，參見 grid）。

不指定時，當 dataZoom-inside.orient 為 'vertical' 時，默認控制和 dataZoom 平行的第一個 yAxis。但是不建議使用默認值，建議顯式指定。

如果是 number 表示控制一個軸，如果是 Array 表示控制多個軸。

例如有如下 ECharts option：

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

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

[ default: null ]

設置 dataZoom-inside 組件控制的 radius 軸（即 radiusAxis，是直角坐標系中的概念，參見 polar）。

如果是 number 表示控制一個軸，如果是 Array 表示控制多個軸。

例如有如下 ECharts option：

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

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

[ default: null ]

設置 dataZoom-inside 組件控制的 angle 軸（即 angleAxis，是直角坐標系中的概念，參見 polar）。

如果是 number 表示控制一個軸，如果是 Array 表示控制多個軸。

例如有如下 ECharts option：

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

dataZoom[i]-inside.filterMode   |   string

[ default: 'filter' ]

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

可選值為：

• 'filter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被過濾掉。即會影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只要有一個維度在數(shù)據(jù)窗口外，整個數(shù)據(jù)項就會被過濾掉。
• 'weakFilter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被過濾掉。即會影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只有當全部維度都在數(shù)據(jù)窗口同側(cè)外部，整個數(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）過濾功能，比較清晰。

如下面的例子：

點擊編輯實例 》》

dataZoom[i]-inside.start   |   number

[ default: 0 ]

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

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

dataZoom[i]-inside.end   |   number

[ default: 100 ]

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

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

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

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件數(shù)據(jù)窗口范圍的起始數(shù)值。如果設置了 dataZoom-inside.start 則 startValue 失效。

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

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

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

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件的數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。如果設置了 dataZoom-inside.end 則 endValue 失效。

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

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

dataZoom[i]-inside.minSpan   |   number

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件用于限制窗口大小的最小值（百分比值），取值范圍是 0 ~ 100。

如果設置了 dataZoom-inside.minValueSpan 則 minSpan 失效。

dataZoom[i]-inside.maxSpan   |   number

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件用于限制窗口大小的最大值（百分比值），取值范圍是 0 ~ 100。

如果設置了 dataZoom-inside.maxValueSpan 則 maxSpan 失效。

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

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件用于限制窗口大小的最小值（實際數(shù)值）。

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

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

[ default: null ]

ECharts 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件用于限制窗口大小的最大值（實際數(shù)值）。

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

dataZoom[i]-inside.orient   |   string

[ default: null ]

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

可選值為：

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

dataZoom[i]-inside.zoomLock   |   boolean

[ default: false ]

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

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

dataZoom[i]-inside.throttle   |   number

[ default: 100 ]

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

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

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

dataZoom[i]-inside.rangeMode   |   Array

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

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

dataZoom[i]-inside.zoomOnMouseWheel   |   boolean

[ default: true ]

如何觸發(fā)縮放?？蛇x值為：

• true：表示不按任何功能鍵，鼠標滾輪能觸發(fā)縮放。
• false：表示鼠標滾輪不能觸發(fā)縮放。
• 'shift'：表示按住 shift 和鼠標滾輪能觸發(fā)縮放。
• 'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發(fā)縮放。
• 'alt'：表示按住 alt 和鼠標滾輪能觸發(fā)縮放。

dataZoom[i]-inside.moveOnMouseMove   |   boolean

[ default: true ]

如何觸發(fā)數(shù)據(jù)窗口平移?？蛇x值為：

• true：表示不按任何功能鍵，鼠標移動能觸發(fā)數(shù)據(jù)窗口平移。
• false：表示鼠標滾輪不能觸發(fā)縮放。
• 'shift'：表示按住 shift 和鼠標移動能觸發(fā)數(shù)據(jù)窗口平移。
• 'ctrl'：表示按住 ctrl 和鼠標移動能觸發(fā)數(shù)據(jù)窗口平移。
• 'alt'：表示按住 alt 和鼠標移動能觸發(fā)數(shù)據(jù)窗口平移。

dataZoom[i]-inside.preventDefaultMouseMove   |   boolean

[ default: true ]

是否阻止 mousemove 事件的默認行為。