Java程序設(shè)計任務(wù)驅(qū)動教程Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）數(shù)據(jù)區(qū)域縮放組件的屬性及設(shè)置Web數(shù)據(jù)可視化教程（基于ECharts）現(xiàn)在支持以下多種類型的dataZoom組件：①內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內(nèi)置于坐標系中，使用戶可以在坐標系上通過鼠標拖拽、鼠標滾輪、手指滑動（觸屏上）來縮放或漫游坐標系。②滑動條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨的滑動條，用戶在滑動條上進行縮放或漫游。③框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：提供一個選框進行數(shù)據(jù)區(qū)域縮放。即toolbox.feature.dataZoom，配置項在toolbox中。?dataZoom和數(shù)軸的關(guān)系?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ù)過濾以及在內(nèi)部設(shè)置軸的顯示窗口來達到數(shù)據(jù)窗口縮放的效果。數(shù)據(jù)過濾模式（dataZoom.filterMode）的設(shè)置不同，效果也不同。其取值可選項為：①'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è)置為空。即不會影響其他軸的數(shù)據(jù)范圍。④'none':不過濾數(shù)據(jù)，只改變數(shù)軸范圍。如何設(shè)置，由用戶根據(jù)場景和需求自己決定。①當『只有X軸或只有Y軸受dataZoom組件控制』時，常使用filterMode:'filter'，這樣能使另一個軸自適應(yīng)過濾后的數(shù)值范圍。②當『X軸Y軸分別受dataZoom組件控制』時：?如果X軸和Y軸是『同等地位的、不應(yīng)互相影響的』，例如在『雙數(shù)值軸散點圖』中，那么兩個軸可都設(shè)為filterMode:'empty'。?如果X軸為主，Y軸為輔，例如在『柱狀圖』中，需要『拖動dataZoomX改變X軸過濾柱子時，Y軸的范圍也自適應(yīng)剩余柱子的高度』，『拖動dataZoomY改變Y軸過濾柱子時，X軸范圍不受影響』，那么就X軸設(shè)為filterMode:'filter'，Y軸設(shè)為filterMode:'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:[//第一列對應(yīng)X軸，第二列對應(yīng)Y軸。[12,24,36],[90,80,70],[3,9,27],[1,11,111]]}}如果本示例中，dataZoomX的filterMode設(shè)置為'filter'。于是，假設(shè)當用戶拖拽dataZoomX（不去動dataZoomY）導(dǎo)致其valueWindow變?yōu)閇2,50]時，dataZoomX對series.data的第一列進行遍歷，窗口外的整項去掉，最終得到的series.data為：[//第一列對應(yīng)X軸，第二列對應(yīng)Y軸。[12,24,36],//[90,80,70]整項被過濾掉，因為90在dataWindow之外。[3,9,27]//[1,11,111]整項被過濾掉，因為1在dataWindow之外。]過濾前，series.data中對應(yīng)Y軸的值有24、80、9、11，過濾后，只剩下24和9，那么Y軸的顯示范圍就會自動改變以適應(yīng)剩下的這兩個值的顯示（如果Y軸沒有被設(shè)置min、max固定其顯示范圍的話）。所以，filterMode:'filter'的效果是：過濾數(shù)據(jù)后使另外的軸也能自動適應(yīng)當前數(shù)據(jù)的范圍。如果本示例中，dataZoomY的filterMode設(shè)置為'empty'。于是，假設(shè)當用戶拖拽dataZoomY（不去動dataZoomX）導(dǎo)致其dataWindow變?yōu)閇10,60]時，dataZoomY對series.data的第二列進行遍歷，窗口外的值被設(shè)置為empty（即替換為NaN，這樣設(shè)置為空的項，其所對應(yīng)柱形，在X軸還有占位，只是不顯示出來）。最終得到的series.data為：[//第一列對應(yīng)X軸，第二列對應(yīng)Y軸。[12,24,36],[90,NaN,70],//設(shè)置為empty(NaN)[3,NaN,27],//設(shè)置為empty(NaN)[1,11,111]]這時，series.data中對應(yīng)于X軸的值仍然全部保留不受影響，為12、90、3、1。那么用戶對dataZoomY的拖拽操作不會影響到X軸的范圍。這樣的效果，對于離群點（outlier）過濾功能，比較清晰。另外，如果在任一個數(shù)軸上設(shè)置了min、max（如設(shè)置yAxis:{min:0,max:400}），那么這個數(shù)軸無論如何也不會被其他數(shù)軸的dataZoom行為影響了。?數(shù)據(jù)窗口的設(shè)置?dataZoom的數(shù)據(jù)窗口范圍的設(shè)置，目前支持兩種形式：①百分比形式：即設(shè)置dataZoom.start和dataZoom.end。②絕對數(shù)值形式：即設(shè)置dataZoom.startValue和dataZoom.endValue。注意：當使用百分比形式指定dataZoom范圍時，且處于如下場景（或類似場景）中，dataZoom的結(jié)果是和dataZoom組件的定義順序相關(guān)的。示例代碼如下：option={dataZoom:[{id:'dataZoomX',type:'slider',xAxisIndex:[0],//設(shè)定為'filter'從而X的窗口變化會影響Y的范圍。filterMode:'filter',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:[//第一列對應(yīng)X軸，第二列對應(yīng)Y軸。[12,24,36],[90,80,70],[3,9,27],[1,11,111]]}}在本示例代碼中，dataZoomY的start:20,end:80到底表示什么意思？◆如果yAxis.min、yAxis.max進行了直接設(shè)置：那么dataZoomY的start:20,end:80表示yAxis.min~yAxis.max的20%到80%?！羧绻鹹Axis.min、yAxis.max沒有設(shè)置：①如果dataZoomX設(shè)置為filterMode:'empty'：那么dataZoomY的start:20,end:80表示series.data中dataMinY~dataMaxY（即上例中的9~80）的20%到80%。②如果dataZoomX設(shè)置為filterMode:'fi