Newer
Older
ganzhou-feidu / src / pages / ywts / shms / tcy / components / automaticCarousel.js
/**
 * 图表自动轮播
 * @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);
  });
}