Add a shuffling effect to every pie

Echart pie chart rotation effect

The key code is as follows. The length of the pie chart data and the pie chart echart object can be passed in to complete the rotation of the pie chart. The code is as follows:

/**** @param pieDataLength pie data length* @param ec Pie chart echart object* @param time rotation 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) % dataLenec.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) % dataLenec.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: curIndex});}, time);})}

Highlight the pie chart, hide the key code settings, and control the time by monitoring the mouse movement in and out.Export it as a public method, call it directly when using it, and pass in the data length and the ecahrt graphic object.Simple operation