option配置
dataZoom: [
//滑动条
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条,不影响使用
type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 开始位置。
endValue: 5, // 一次性展示几个。
},
],
添加定时器控制滚动条位置
setInterval(() => {
// 每次向后滚动一个,最后一个从头开始。
//判断是否滑动到最后一条数据,若是,则重置柱状图(显示前6条数据)
if (option.dataZoom[0].endValue == currData.value.length / 2 - 1) {
option.dataZoom[0].endValue = 5
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)
}, 3000)
// (添加监听器监测页面变化,不然会黑屏后直接加载下一状态,看不出移动效果)
window.addEventListener('resize', function () {
myChart.resize()
})