关于vue中echarts饼图轮播动画

通过控制option.series.data数据中的selected属性

突出的高度可以自行设置

 

 

var index = 0; //轮播标识
var timerId = ""; //定时器
var dynamisTime = 2000; //间隔时间
var len = option.series[0].data.length; //轮播长度
function dynamic() {
    timerId = setInterval(() => {
        if (index >= len) {
            index = 0;
        }
        if (index != 0) {
            option.series[0].data[index - 1].selected = false;
        } else {
            option.series[0].data[len - 1].selected = false;
        };
        option.series[0].data[index].selected = true;
        index++;
        myChart.setOption(option); //重新绘制
    }, dynamisTime)
} 

注意:启动定时器之前要先清除定时器

posted @ 2020-11-25 09:54  顾淮笙  阅读(2692)  评论(0)    收藏  举报