Echarts學習之十六：dataZoom
阿新 • • 發佈：2019-01-27
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 和滑鼠移動能觸發資料視窗平移。
}
];