ataZoom的使用方法
功能：
1、有inslide和slide兩種dataZoom，也分X,Y軸
兩種dataZoom的使用
dataZoom:[
{
type:"slider",//slider表示有滑動塊的，
show:true,
xAxisIndex:[0],//表示x軸折疊
start:1,//數據窗口范圍的起始百分比,表示1%
end:35//數據窗口范圍的結束百分比,表示35%坐標
},
{
type:"inside",//
yAxisIndex:[0],//表示y軸折疊
start:1,
end:35
},
]
dataZoom的相關配置
可以可以到官網了解更多關於echarts 配置項的相關配置
官網官網：http://echarts.baidu.com/
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 和鼠標移動能觸發數據窗口平移。
}
]
案例demo：
options = {
title:{
// left:20,
// top:10,
padding:[10,0,5,20],
textStyle:{
color:'yellowgreen',
},
text:'營業額統計',
subtext:'副標題'
},
legend: {
top: 30,
left:100
// padding:[100,0,10,15]
},
tooltip:{//組件提示
trigger:'axis',
axisPointer:{
type: 'cross'
}
},
dataZoom:[
{
type:'slider',//slider表示有滑動塊的，inside表示內置的
show:true,
xAxisIndex:[0],
start:10,
end:35
}
],
xAxis:{
data:['23:00-8:00','8:00-10:00','10:00-12:00','12:00-14:00','14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00']
},
yAxis:{},
series:[
{
name:'銷量',
type: 'line',
data:[100, 200, 150, 99, 43.3, 85.8, 93.7]
},
{
name:'支付寶',
type: 'line',
data:[3.1, 258.4, 55.1, 0, 9, 50, 100,60]
},
{
name:'會員卡',
type: 'line',
data:[0.4, 3.2, 82.5,30, 40, 300, 15, 10]
}
]
};
myContainer.setOption(options);
運行圖如下;
