/** * 图表自动轮播 * @param option 图表配置 * @param myChart 图表实例 * @param t 滚动间隔 * @param endValue 图表显示endValue + 1条数据 */ export function automaticCarousel(option: any, myChart: any, t = 2000, getEndValue = 4) { // 初始显示endValue + 1 条数据 option.dataZoom[0].endValue = getEndValue option.dataZoom[0].startValue = 0 option && myChart.setOption(option) let timer = setInterval(() => { // 每次向后滚动一个,最后一个从头开始。 if (option.dataZoom[0].endValue == option.xAxis[0].data.length) { option.dataZoom[0].endValue = getEndValue option.dataZoom[0].startValue = 0 } else { option.dataZoom[0].endValue += 1 option.dataZoom[0].startValue += 1 } option && myChart.setOption(option) }, t) myChart.on('mouseover', () => { // 鼠标悬浮,停止自动轮播 if (timer) { clearInterval(timer) } }) myChart.on('mouseout', () => { // 鼠标移出,重新开始自动轮播 if (timer) { clearInterval(timer) } timer = setInterval(() => { // 每次向后滚动一个,最后一个从头开始。 if (option.dataZoom[0].endValue == option.xAxis[0].data.length) { option.dataZoom[0].endValue = getEndValue option.dataZoom[0].startValue = 0 } else { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 } option && myChart.setOption(option) }, t) }) }