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