Echart图实现tooltips循环轮播(方法)

方法调用

        参数:

                mychart echart实例

                num: 数据长度

                time:轮播一次时间间隔

autoPlay(myChart, option.series[0].data.length, 3000);
// 内容可以不需要修改<br>/**<br>* maChart是echarts初始化的实例对象<br>* num 是series 里面的data长度,传入值可为option.series[0].data.length<br>* time 是时间间隔<br><br>*/<em>export function autoPlay(myChart, num, time) {
  const defaultData = { // 设置默认值
    time: 3000,
    num: 100
  };
  if (!time) {
    time = defaultData.time
  }
  if (!num) {
    num = defaultData.num
  }
  let count = 0
  let timeTicket = null
  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(() => {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0 // serieIndex的索引值   可以触发多个
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: count
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: count
    })
    count++
    if (count >= num) {
      count = 0
    }
  }, time)
  myChart.on('mouseover', (params) => {
    clearInterval(timeTicket)
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
  })
 
  myChart.on('mouseout', () => {
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(() => {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0 // serieIndex的索引值   可以触发多个
      })
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: count
      })
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: count
      })
      count++;
      if (count >= num) {
        count = 0
      }
    }, time)
  })

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值