echarts饼图外圈转动动画 pie

「爱情、让人受尽委屈。」 2023-06-07 05:35 306阅读 0赞

![在这里插入图片描述][20191012180722543.gif]

就是这个东西，会围着饼图转动

准备：两个div，一个装饼图，一个装那个转圈的。。。这里就只写转圈的了，饼图就不写了

js代码：

showpieLinex();
    function showpieLinex(){
            var myChartLine = echarts.init(document.getElementById('toprightviewLines'));
    
            var tips = 0;
            var m=0;
            var mm=1;
    
            function loading() {
                return [
                    {
                        value: tips,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)',
                            }
                        }
                    },
                    {
                        value: m,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 4,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(255,255,255,0.7)' // 0% 处的颜色
                                    },{
                                        offset: 0.3,
                                        color: 'rgba(255,255,255,1)' // 0% 处的颜色
                                    },{
                                        offset: 0.6,
                                        color: 'rgba(255,255,255,1)' // 0% 处的颜色
                                    },{
                                        offset: 0.8,
                                        color: 'rgba(255,255,255,1)' // 0% 处的颜色
                                    },{
                                        offset: 1,
                                        color: 'rgba(255,255,255,1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false,
                                },
                                color: 'rgba(255,255,255,0)',
                                shadowBlur: 30,
                                shadowColor: 'rgba(255,255,255,1)'
                            }
                        }
                    }, {
                        value: 100 - tips,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)',
                            }
                        }
                    }];
            }
    
            setInterval(function() {
                if (tips == 100) {
                    tips = 0;
                    m=0;
                }else if(tips<=10){
                    ++tips;
                    ++m
                }else if(tips>=90){
                    ++tips;
                    --m
                }else{
                    ++tips;
                }
    
                myChartLine.setOption({
                    animation:false,
                    animationThreshold:100,
                    animationDurationUpdate: function (idx) {
                        // 越往后的数据延迟越大
                        return idx * 1000;
                    },
                    series: [{
                        name: 'loading',
                        type: 'pie',
                        radius: ['66%', '68%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: loading()
                    }]
                })
            }, 50);
        }

[20191012180722543.gif]: /images/20230601/0a0b3d9a013946139217c58cc140c3fe.png