Java程序設(shè)計(jì)任務(wù)驅(qū)動(dòng)教程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)置于坐標(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中。?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è)置不同，效果也不同。其取值可選項(xiàng)為：①'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)景和需求自己決定。①當(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è)為filterMode:'empty'。?如果X軸為主，Y軸為輔，例如在『柱狀圖』中，需要『拖動(dòng)dataZoomX改變X軸過(guò)濾柱子時(shí)，Y軸的范圍也自適應(yīng)剩余柱子的高度』，『拖動(dòng)dataZoomY改變Y軸過(guò)濾柱子時(shí)，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:[//第一列對(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)閇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)?0在dataWindow之外。[3,9,27]//[1,11,111]整項(xiàng)被過(guò)濾掉，因?yàn)?在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ù)的范圍。如果本示例中，dataZoomY的filterMode設(shè)置為'empty'。于是，假設(shè)當(dāng)用戶拖拽dataZoomY（不去動(dòng)dataZoomX）導(dǎo)致其dataWindow變?yōu)閇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ò)濾功能，比較清晰。另外，如果在任一個(gè)數(shù)軸上設(shè)置了min、max（如設(shè)置yAxis:{min:0,max:400}），那么這個(gè)數(shù)軸無(wú)論如何也不會(huì)被其他數(shù)軸的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],//設(shè)定為'filter'從而X的窗口變化會(huì)影響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中并沒(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]]}}在本示例代碼中，dataZoomY的start:20,end:80到底表示什么意思？◆如果yAxis.min、yAxis.max進(jìn)行了直接設(shè)置：那么dataZoomY的start:20,end:80表示yAxis.min~yAxis.max的20%到80%?！羧绻鹹Axis.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:'fi