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是不一样的,所以需要注意一下!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM