echarts（三）--縮放，滾動

 

dataZoom=[ //區域縮放

{

id: 'dataZoomX',

show:true, //是否顯示 組件。若是設置爲 false，不會顯示，可是數據過濾的功能還存在。

backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色

type: 'slider', //slider表示有滑動塊的，inside表示內置的

dataBackground:{ //數據陰影的樣式。

lineStyle:mylineStyle, //陰影的線條樣式

areaStyle:myareaStyle, //陰影的填充樣式

},

fillerColor:"rgba(167,183,204,0.4)", //選中範圍的填充顏色。

borderColor:"#ddd", //邊框顏色。

filterMode: 'filter', //'filter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。

//'weakFilter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只有當所有維度都在數據窗口同側外部，整個數據項纔會被過濾掉。

//'empty'：當前數據窗口外的數據，被 設置爲空。即 不會 影響其餘軸的數據範圍。

//'none': 不過濾數據，只改變數軸範圍。

xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸

yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸

radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸

angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸

start: 30, //數據窗口範圍的起始百分比,表示30%

end: 70, //數據窗口範圍的結束百分比,表示70%

startValue:10, //數據窗口範圍的起始數值

endValue:100, //數據窗口範圍的結束數值。

orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。

zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。

throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。

zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。

moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。

left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'

top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'

right:"auto", //組件離容器右側的距離,'20%'

bottom:"auto", //組件離容器下側的距離,'20%'

 

},

{

id: 'dataZoomY',

type: 'inside',

filterMode: 'empty',

disabled:false, //是否中止組件的功能。

xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸

yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸

radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸

angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸

start: 30, //數據窗口範圍的起始百分比,表示30%

end: 70, //數據窗口範圍的結束百分比,表示70%

startValue:10, //數據窗口範圍的起始數值

endValue:100, //數據窗口範圍的結束數值。

orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。

zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。

throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。

zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。

moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。

}

案列：

dataZoom:  [
    {
        type: 'inside',
        start:20,
        end:80                                 
    },
    {
        show: true,
        yAxisIndex: 0,
        width: 20,
        height: '80%',
        showDataShadow: false,
        left: '98%',
    },
    {
        show: true,
        xAxisIndex: 0,
        height: 20,
        showDataShadow: false,
        top:'95%',
    }
]