echarts數據區域縮放（鼠標滾輪、滾動條、拉選框）

當一個echarts圖表上的數據不少時，想要查看部分區域的數據狀態，能夠經過數據區域縮放來實現，現總結三個方法：

鼠標滾輪縮放：

 

 1 var arr = [];
 2 　　for(var i = 0;i<15;i++){
 3 　　　　arr.push(10*(Math.random()-0.5))
 4 　　}
 5 　　myCharts.setOption({
 6 　　　title:{
 7 　　　　text:"鼠標滾輪縮放數據"
 8 　　　},
 9 
10 　　　tooltip:{
11 　　　　trigger:'axis'
12 　　　},
13 
14 　　　xAxis:{
15 　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
16 　　　},
17 
18 　　　dataZoom:[{
19 　　　　type:"inside"         //詳細配置可見echarts官網
20 　　　}],
21 
22      series:[{
23 　　　　type:"line",
24 　　　　data:arr
25 　　　}]
26 　　})

 

//效果以下，當鼠標光驅在折線圖上時，能夠根據滾動鼠標滾輪來查看數據

滾動條縮放：　

 1 myCharts.setOption({
 2 
 3 　　　title:{
 4 　　　　text:"滾動條縮放數據"
 5 　　　},
 6 
 7 　　　tooltip:{
 8 　　　　trigger:'axis'
 9 　　　},
10 
11 　　　xAxis:{
12 　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
13 　　　},
14 
15 　　　dataZoom:[{
16 　　　　type: 'slider',//圖表下方的伸縮條
17 　　　　show : true, //是否顯示
18 　　　　realtime : true, //拖動時，是否實時更新系列的視圖
19 　　　　start : 0, //伸縮條開始位置（1-100），能夠隨時更改
20 　　　　end : 100, //伸縮條結束位置（1-100），能夠隨時更改
21 　　　}],
22 
23     　series:[{
24 　　　　type:"line",
25 　　　　data:arr
26 　　　}]
27 　　})

//效果以下，能夠拖動底下滾動條來減少查看數據的範圍或者拖動滾動條來確認查看哪裏的數據

選框縮放：

　　

 1 myCharts.setOption({
 2 
 3 　　　title:{
 4 　　　　text:"滾動條縮放數據"
 5 　　　},
 6 
 7 　　　tooltip:{
 8 　　　　trigger:'axis'
 9 　　　},
10 
11 　　　xAxis:{
12 　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
13 　　　},
14 
15 　　　toolbox: {
16 　　　　show:true,
17 　　　　feature:{
18 　　　　　dataZoom: {
19 　　　　　　yAxisIndex:"none"
20 　　　　　},
21 　　　　　//其餘功能性按鈕查看官網進行增長，包括（顯示數據，下載圖片，改成柱狀圖等）
22 　　　　}
23 　　　},
24 
25     　　series:[{
26 　　　　type:"line",
27 　　　　data:arr
28 　　　}]
29 
30 　　})

//效果以下：能夠在折線圖上拉取選框來肯定查看哪裏的數據