Echart饼图添加轮播效果

Echart饼图轮播效果

关键代码如下，传入饼图数据的长度，以及饼图echart对象即可完成饼图的轮播，代码如下：

/**
 * 
 * @param pieDataLength 饼图数据长度
 * @param ec 饼图echart对象
 * @param time 轮播时间
 */
export function pipeAnimation(pieDataLength: number, ec: any,time:number) {
  let timer = null;
  if (pieDataLength < 2) {
    setTimeout(() => {
      ec.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
    })
    return;
  }

  let curIndex = 0;
  if (timer) {
    clearInterval(timer)
  }
  timer = setInterval(() => {
    let dataLen = pieDataLength;
    ec.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex });
    curIndex = (curIndex + 1) % dataLen
    ec.dispatchAction({
      type: 'highlight', seriesIndex: 0, dataIndex: curIndex
    });
  }, time);

  ec.on('mouseover', function (param) {
    clearInterval(timer)
    ec.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: curIndex
    })
    ec.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: param.dataIndex
    })

    curIndex = param.dataIndex;
  })

  ec.on('mouseout', function (param) {
    curIndex = param.dataIndex;
    if (timer) {
      clearInterval(timer)
    }
    timer = setInterval(() => {
      let dataLen = pieDataLength;
      ec.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex });
      curIndex = (curIndex + 1) % dataLen
      ec.dispatchAction({
        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
      });
    }, time);
  })

}

饼图图的高亮，隐藏关键代码设置，通过监听鼠标移入移出时间控制即可。导出成一个公用方法，使用时直接调用，传入数据长度及ecahrt图形对象即可。简单操作