Echarts饼图轮播效果实现

Echarts版本:v4

hoverOffset:20,
selectedOffset:20,
selectedMode:true,

这三个属性是设置触发选中时的凸出效果,如果不设置内圈是不会悬浮出来的,只会有外圈凸出的效果
https://echarts.apache.org/v4/zh/option.html#series-pie.hoverOffset
将如下代码复制即可实现

let currentIndex = -1;
setInterval(function() {
  // 不选中
  var dataLen = option.series[0].data.length;
   myChart.dispatchAction({
    type: 'pieUnSelect',
    seriesIndex: 0,
    dataIndex: currentIndex
   });
  currentIndex = (currentIndex + 1) % dataLen;
  // 选中
   myChart.dispatchAction({
        type: 'pieSelect',
    seriesIndex: 0,
    dataIndex: currentIndex
   });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}, 1000);

版本4.0和5.0的触发action事件是不一样的,对应的type是不一样的,所以需要注意一下!

posted @ 2021-12-10 17:16  橙发  阅读(1223)  评论(0编辑  收藏  举报