做项目时遇到了一个这样的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个，但如果展示的数组个数小于设置的个数时，就永远都捕获不到了（展示数组个数小于设置个数也没必要进行滚动显示）
