echarts x,y轴数据太长自动滚动(每次只显示固定数量，定时滚动显示其它)

做项目时遇到了一个这样的echarts表，和正常的柱状图没啥区别，但是有个需求就是需要每次只显示10条数据，然后定时滚动显示其它，当滚动到最后一条数据，返回第一条一直循环,这个怎么实现查了好多的例子都没好的解决方案，还是在万能的度娘找到了答案，嘻嘻嘻~~

原文链接

看一下设计图

echarts.png

实际效果

autoPlay.gif

下面我们一起看一下解决方案

1. echarts图表创建

var myChart = echarts.init(document.getElementById('echarts'))
var KSMC = [100, 82, 80, 70, 65, 66, 60,54, 50, 42, 40]
var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            dataZoom: [//滑动条
                {
                    yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: false,//是否显示滑动条，不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    startValue: 0, // 从头开始。
                    endValue: 6  // 一次性展示6个。
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    inverse:true, //是否是反向坐标轴
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','测试','测试1','测试2','测试3'],
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: KSMC
                }
            ]
        };
        myChart.setOption(option);

2. 自动滚动效果是依赖于Echarts自带滑动条实现的：
   除了在option里加dataZoom属性
   还需要在绑定的地方这样写

//通过定时器的方式刷新，改变statrValue，endValue
        setInterval(function () {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == KSMC.length ) {
                option.dataZoom[0].endValue = 6; 
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            myChart.setOption(option);
        }, 2000);

3. 这样就可以了
   看源码可知，这个方法有一个弊端，因为是捕获当目前展示的最后一个数字所在位置为数组长度减一（最后一个）时，将展示数字的值换掉，从头展示，我们目前设置的是展示10个，但如果展示的数组个数小于设置的个数时，就永远都捕获不到了（展示数组个数小于设置个数也没必要进行滚动显示）