echarts_部分圖表配置_dataZoom精確控制顯示數據數量

echarts為我們提供了dataZoom組件，當數據過多時就有了它的用武之地，業務場景：數據返回100調可是為了前端顯示效果默認只顯示20條，其他數據由dataZoom控制顯示隱藏：

function Z_bar (thisId,titleName){
    var sdate=$("#sdate_id").val();
    var edate=$("#edate_id").val();
    var flag= $("#selectIndex").val();
    $.ajax({
        type : "POST",
        url : "../../shareTouch/shareTouchSum.do",
        async : false,
        data:{'sdate' : sdate,
            'edate' : edate,
            'flag' :flag},
        success : function(result, resultState){
            
            //默認顯示20條數據（當數據多余20條時）s
            if(result.length >20 ){
                var dataZoom_end = (20/result.length)*100;
            }else{
                var dataZoom_end = 100;
            }
            
        if (resultState == "success") {
            var num = new Array();
            var name = new Array();
            var resultJson = eval(result);
            $.each(resultJson, function(i, item) {
                var y = new Object();
                var x = new Object();
                y=item.num;
                x=item.nv;
                name.push(x);
                $("#touchName").prepend("<option value='"+x+"'>"+x+"</option>");//追加觸點名稱選擇option
                num.push(y);
            });
            $("#touchName").children().eq(0).attr("selected","selected");
    var myChart = echarts.init(document.getElementById(thisId));
    option = {
            backgroundColor: '#2f4552',
            textStyle:{
                color:'#fff',
                fontSize:'16'
             },
            
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {

                textStyle:{
                    color:'#fff',
                 },
               /* data: [titleName],*/
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                color:'#fff',
                splitLine : {//去掉網格線
                    show : false
                },
                position: 'top',//X軸位置
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel : {
                    show : true,
                    textStyle : {
                        color : '#FFF',
                        align : 'right',
                        fontSize: 15
                    }
                },
                axisLine : {
                    lineStyle : {
                        color : '#FFF'
                    }
                },
                axisTick : {
                    lineStyle : {
                        color : '#FFF'
                    }
                },
            },
            yAxis: {
                
                type: 'category',
                data: name,
                axisLabel : {
                    show : true,
                    textStyle : {
                        color : '#FFF',
                        align : 'right',
                        fontSize: 15
                    }
                },
                axisLine : {//設置軸線

                    lineStyle : {
                        color : '#FFF'
                    }
                },
                axisTick : {//設置刻度
                    lineStyle : {
                        color : '#FFF'
                    }
                },

            },
            dataZoom: [
                       {
                           
                           width:'15',
                           start:0,
                           end:dataZoom_end,
                           type: 'slider',
                           yAxisIndex: 0,
                           filterMode: 'empty',
                           textStyle:{
                               color:'#fff',
                               fontSize:'16'
                           }
                       }
                   ],
            series: [
                {
                    name: titleName,
                    type: 'bar',
                    data: num,
                    
                    label : {
                        normal : {
                            show : true,//顯示數字
                            position : 'right'
                        }
                    },
                    
                    barWidth : 15,//柱子寬度
                    itemStyle : {
                        normal : {
                            color:'#ccecff',//柱狀的顏色
                            label : {
                                  textStyle : {
                                      fontSize : '15',//柱狀上的顯示的文字大小
                                      color:'#ccecff'
                                  }
                              }
                        }
                    },

                }
                
               
                

            ]
        };

            myChart.setOption(option);
}
}
})
}

官網對於dataZoom介紹：http://echarts.baidu.com/option.html#dataZoom

dataZoom數據窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。其實我只是添加了請求成功后的if判斷，20是我設置的顯示條數，這個可以作為參數傳進來或者后端數據發送回來這樣更動態一點，然后就實現數據顯示的控制嘍。