Newer
Older
safe_production_front / src / components / Echart / automaticCarousel.ts
/**
 * 图表自动轮播
 * @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)
  })
}