在實際項目中經(jīng)常會碰到 數(shù)據(jù)量大副硅，數(shù)據(jù)區(qū)域廣 時數(shù)據(jù)顯示問題傅寡。而在交互組件中dataZoom可以幫我們實現(xiàn)對數(shù)據(jù)區(qū)域的縮放
以下是dataZoom的屬性
dataZoom=[ //區(qū)域縮放
{
id: 'dataZoomX',
show:true, //是否顯示 組件蜈抓。如果設(shè)置為 false，不會顯示戒突，但是數(shù)據(jù)過濾的功能還存在贼涩。
backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色
type: 'slider', //slider表示有滑動塊的，inside表示內(nèi)置的
dataBackground:{ //數(shù)據(jù)陰影的樣式。
lineStyle:mylineStyle, //陰影的線條樣式
areaStyle:myareaStyle, //陰影的填充樣式
},
fillerColor:"rgba(167,183,204,0.4)", //選中范圍的填充顏色判哥。
borderColor:"#ddd", //邊框顏色献雅。
filterMode: 'filter', //'filter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過濾掉塌计。即 會 影響其他軸的數(shù)據(jù)范圍挺身。每個數(shù)據(jù)項，只要有一個維度在數(shù)據(jù)窗口外锌仅，整個數(shù)據(jù)項就會被過濾掉章钾。
//'weakFilter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過濾掉热芹。即 會 影響其他軸的數(shù)據(jù)范圍贱傀。每個數(shù)據(jù)項，只有當(dāng)全部維度都在數(shù)據(jù)窗口同側(cè)外部伊脓，整個數(shù)據(jù)項才會被過濾掉府寒。
//'empty'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 設(shè)置為空报腔。即 不會 影響其他軸的數(shù)據(jù)范圍椰棘。
//'none': 不過濾數(shù)據(jù)，只改變數(shù)軸范圍榄笙。
xAxisIndex:0, //設(shè)置 dataZoom-inside 組件控制的 x軸,可以用數(shù)組表示多個軸
yAxisIndex:[0,2], //設(shè)置 dataZoom-inside 組件控制的 y軸,可以用數(shù)組表示多個軸
radiusAxisIndex:3, //設(shè)置 dataZoom-inside 組件控制的 radius 軸,可以用數(shù)組表示多個軸
angleAxisIndex:[0,2], //設(shè)置 dataZoom-inside 組件控制的 angle 軸,可以用數(shù)組表示多個軸
start: 30, //數(shù)據(jù)窗口范圍的起始百分比,表示30%
end: 70, //數(shù)據(jù)窗口范圍的結(jié)束百分比,表示70%
startValue:10, //數(shù)據(jù)窗口范圍的起始數(shù)值
endValue:100, //數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。
orient:"horizontal", //布局方式是橫還是豎祷蝌。不僅是布局方式茅撞，對于直角坐標(biāo)系而言，也決定了巨朦，缺省情況控制橫向數(shù)軸還是縱向數(shù)軸米丘。'horizontal'：水平。'vertical'：豎直糊啡。
zoomLock:false, //是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小拄查。如果設(shè)置為 true 則鎖定選擇區(qū)域的大小，也就是說棚蓄，只能平移堕扶，不能縮放。
throttle:100, //設(shè)置觸發(fā)視圖刷新的頻率梭依。單位為毫秒（ms）稍算。
zoomOnMouseWheel:true, //如何觸發(fā)縮放∫鬯可選值為：true：表示不按任何功能鍵糊探，鼠標(biāo)滾輪能觸發(fā)縮放。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放。'shift'：表示按住 shift 和鼠標(biāo)滾輪能觸發(fā)縮放科平。'ctrl'：表示按住 ctrl 和鼠標(biāo)滾輪能觸發(fā)縮放褥紫。'alt'：表示按住 alt 和鼠標(biāo)滾輪能觸發(fā)縮放。
moveOnMouseMove:true, //如何觸發(fā)數(shù)據(jù)窗口平移瞪慧。true：表示不按任何功能鍵髓考，鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放汞贸。'shift'：表示按住 shift 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移绳军。'ctrl'：表示按住 ctrl 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'alt'：表示按住 alt 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移矢腻。
left:"center", //組件離容器左側(cè)的距離,'left', 'center', 'right','20%'
top:"top", //組件離容器上側(cè)的距離,'top', 'middle', 'bottom','20%'
right:"auto", //組件離容器右側(cè)的距離,'20%'
bottom:"auto", //組件離容器下側(cè)的距離,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止組件的功能门驾。
xAxisIndex:0, //設(shè)置 dataZoom-inside 組件控制的 x軸,可以用數(shù)組表示多個軸
yAxisIndex:[0,2], //設(shè)置 dataZoom-inside 組件控制的 y軸,可以用數(shù)組表示多個軸
radiusAxisIndex:3, //設(shè)置 dataZoom-inside 組件控制的 radius 軸,可以用數(shù)組表示多個軸
angleAxisIndex:[0,2], //設(shè)置 dataZoom-inside 組件控制的 angle 軸,可以用數(shù)組表示多個軸
start: 30, //數(shù)據(jù)窗口范圍的起始百分比,表示30%
end: 70, //數(shù)據(jù)窗口范圍的結(jié)束百分比,表示70%
startValue:10, //數(shù)據(jù)窗口范圍的起始數(shù)值
endValue:100, //數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。
orient:"horizontal", //布局方式是橫還是豎多柑。不僅是布局方式奶是，對于直角坐標(biāo)系而言，也決定了竣灌，缺省情況控制橫向數(shù)軸還是縱向數(shù)軸聂沙。'horizontal'：水平。'vertical'：豎直初嘹。
zoomLock:false, //是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小及汉。如果設(shè)置為 true 則鎖定選擇區(qū)域的大小，也就是說屯烦，只能平移坷随，不能縮放。
throttle:100, //設(shè)置觸發(fā)視圖刷新的頻率驻龟。單位為毫秒（ms）温眉。
zoomOnMouseWheel:true, //如何觸發(fā)縮放∥毯可選值為：true：表示不按任何功能鍵类溢，鼠標(biāo)滾輪能觸發(fā)縮放。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放露懒。'shift'：表示按住 shift 和鼠標(biāo)滾輪能觸發(fā)縮放闯冷。'ctrl'：表示按住 ctrl 和鼠標(biāo)滾輪能觸發(fā)縮放。'alt'：表示按住 alt 和鼠標(biāo)滾輪能觸發(fā)縮放懈词。
moveOnMouseMove:true, //如何觸發(fā)數(shù)據(jù)窗口平移窃躲。true：表示不按任何功能鍵，鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移钦睡。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放蒂窒。'shift'：表示按住 shift 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移躁倒。'ctrl'：表示按住 ctrl 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'alt'：表示按住 alt 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移洒琢。
}
]
我們可以通過一個例子來分析數(shù)據(jù)縮放
1.data有三個屬性[m,n,k]
m代表x軸 n代表y軸 k代表樣本大醒肀（可以通過半徑直觀反映）
2.dataZoom數(shù)據(jù)窗口范圍設(shè)置（兩種方式 百分比與起始結(jié)束數(shù)值）
start: 30, //數(shù)據(jù)窗口范圍的起始百分比,表示30%
end: 70, //數(shù)據(jù)窗口范圍的結(jié)束百分比,表示70%
startValue:10, //數(shù)據(jù)窗口范圍的起始數(shù)值
endValue:100, //數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。
3.slide.left 為滑動組件里容器左側(cè)距離
可以是相對容器的百分比衰抑，也可以是left center right對齊象迎。
4.xAxis x軸，yAxis y軸
控制x軸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大星河弧（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom砾淌，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
};
// data1.push([10,5,0.5]);
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
option = {
animation: false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
tooltip: {
},
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
數(shù)據(jù)縮放圖
將x軸展示域縮小y軸展示域放大效果圖
- type: 'inside' 為內(nèi)置控件可通過滑輪放大縮小
type:'slider'為外部滑動控件谭网，需要通過鼠標(biāo)拖拽滑動塊
inside
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大型舫（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
// { // 這個dataZoom組件愉择，默認控制x軸劫乱。
// type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
// start: 10, // 左邊在 10% 的位置。
// end: 60 // 右邊在 60% 的位置锥涕。
// },
{ // 這個dataZoom組件衷戈，也控制x軸。
type: 'inside', // 這個 dataZoom 組件是 inside 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置层坠。
end: 60 // 右邊在 60% 的位置殖妇。
},
// {
// type: 'slider',
// yAxisIndex: 0,
// start: 30,
// end: 80
// },
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
],
series: [
{
type: 'scatter', // 這是個『散點圖』
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
// return 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
inside內(nèi)置
slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大衅苹ā（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom拉一，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 這個dataZoom組件，默認控制x軸旧乞。
type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置磅氨。
},
// { // 這個dataZoom組件尺栖，也控制x軸。
// type: 'inside', // 這個 dataZoom 組件是 inside 型 dataZoom 組件
// start: 10, // 左邊在 10% 的位置烦租。
// end: 60 // 右邊在 60% 的位置延赌。
// },
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
// {
// type: 'inside',
// yAxisIndex: 0,
// start: 30,
// end: 80
// }
],
series: [
{
type: 'scatter', // 這是個『散點圖』
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
// return 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
slider外置滑塊
dataZoom filterMode 數(shù)據(jù)過濾模式
filtermode參數(shù)
x軸改變影響y軸叉橱，y軸改變不影響x軸
x：filter y：empty
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大写煲浴（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
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]
]
}
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表掐松。
myChart.setOption(option);
</script>
</body>
</html>
x:0~100 ,y:0~80
調(diào)整x:0~50 使得y變?yōu)?~25
調(diào)整y:0~25 而x不變依舊為0~100
x軸改變影響y軸，y軸改變影響x軸
x：filter y：filter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom大磺，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option={
dataZoom:[{
id:'dataZoomX',
type:'slider',
xAxisIndex:[0],
filterMode:'filter'
},
{
id:'dataZoomY',
type:'slider',
yAxisIndex:[0],
filterMode:'filter'
}
],
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]
]
}
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
調(diào)整y:0~25 使得x變?yōu)?~12
x軸改變不影響y軸杠愧，y軸改變不影響x軸
x：empty y：empty
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大写啤（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option={
dataZoom:[{
id:'dataZoomX',
type:'slider',
xAxisIndex:[0],
filterMode:'empty'
},
{
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]
]
}
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表锐锣。
myChart.setOption(option);
</script>
</body>
</html>
調(diào)整x:0~50 而y不變依舊為0~80
調(diào)整y:0~25 而x不變依舊為0~100
不過濾數(shù)據(jù)，不影響軸
x：none y：none
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大猩痢（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom雕憔，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option={
dataZoom:[{
id:'dataZoomX',
type:'slider',
xAxisIndex:[0],
filterMode:'none'
},
{
id:'dataZoomY',
type:'slider',
yAxisIndex:[0],
filterMode:'none'
}
],
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]
]
}
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表稽荧。
myChart.setOption(option);
</script>
</body>
</html>
調(diào)整x:0~80 y:0~50 數(shù)據(jù)雖然超出數(shù)據(jù)窗口但是沒有發(fā)生過濾
實際項目中經(jīng)常會出現(xiàn)某項數(shù)值暫時不顯示橘茉，但是也要留有位置
將y軸數(shù)據(jù)設(shè)置為NaN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom姨丈，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option={
dataZoom:[{
id:'dataZoomX',
type:'slider',
xAxisIndex:[0],
filterMode:'empty'
},
{
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,NaN,70],
[3,NaN,27],
[1,11,111]
]
}
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
x軸仍有占位
