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

當一個echarts圖表上的數據很多時，想要查看部分區域的數據狀態，可以通過數據區域縮放來實現，現總結三個方法：

鼠標滾輪縮放：

 

var arr = [];
　　for(var i = 0;i<15;i++){
　　　　arr.push(10*(Math.random()-0.5))
　　}
　　myCharts.setOption({
　　　title:{
　　　　text:"鼠標滾輪縮放數據"
　　　},

　　　tooltip:{
　　　　trigger:'axis'
　　　},

　　　xAxis:{
　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
　　　},

　　　dataZoom:[{
　　　　type:"inside"         //詳細配置可見echarts官網
　　　}],

     series:[{
　　　　type:"line",
　　　　data:arr
　　　}]
　　})

 

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

滾動條縮放：　

myCharts.setOption({

　　　title:{
　　　　text:"滾動條縮放數據"
　　　},

　　　tooltip:{
　　　　trigger:'axis'
　　　},

　　　xAxis:{
　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
　　　},

　　　dataZoom:[{
　　　　type: 'slider',//圖表下方的伸縮條
　　　　show : true, //是否顯示
　　　　realtime : true, //拖動時，是否實時更新系列的視圖
　　　　start : 0, //伸縮條開始位置（1-100），可以隨時更改
　　　　end : 100, //伸縮條結束位置（1-100），可以隨時更改
　　　}],

    　series:[{
　　　　type:"line",
　　　　data:arr
　　　}]
　　})

//效果如下，可以拖動底下滾動條來減小查看數據的范圍或者拖動滾動條來確認查看哪里的數據

選框縮放：

　　

myCharts.setOption({

　　　title:{
　　　　text:"滾動條縮放數據"
　　　},

　　　tooltip:{
　　　　trigger:'axis'
　　　},

　　　xAxis:{
　　　　data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
　　　},

　　　toolbox: {
　　　　show:true,
　　　　feature:{
　　　　　dataZoom: {
　　　　　　yAxisIndex:"none"
　　　　　},
　　　　　//其他功能性按鈕查看官網進行增加，包括（顯示數據，下載圖片，改為柱狀圖等）
　　　　}
　　　},

    　　series:[{
　　　　type:"line",
　　　　data:arr
　　　}]

　　})

//效果如下：可以在折線圖上拉取選框來確定查看哪里的數據