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图形对象即可。简单操作