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

看一下设计图

echarts.png

实际效果

autoPlay.gif

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

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);

自动滚动效果是依赖于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);

这样就可以了

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