/** * 图表自动轮播 * @param option 图表配置 * @param myChart 图表实例 * @param t 滚动间隔 * @param endValue 图表显示endValue + 1条数据 */ export function automaticCarousel(option, myChart, 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.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.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); }); }