echarts圆饼图定时器动画

(function () {
    const WdxjEcharts = echarts.init(document.getElementById('wdxjEchart'))

    let num = 0;
    var imgURL = "../imagesNew/wd-center.png";
    var trafficWay = [{
        name: '火车',
        value: 20
    }, {
        name: '飞机',
        value: 10
    }, {
        name: '客车',
        value: 30
    }, {
        name: '轮渡',
        value: 40
    }];

    var data = [];
    var color = ['#4C9EF8', '#86E145', '#F8D849', '#EC6029']
    for (var i = 0; i < trafficWay.length; i++) {
        data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    // shadowBlur: 20,
                    borderColor: color[i],
                    // shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        });
    }
    var option = {
        color: color,
        title: {
            show: false,
            text: '交通方式',
            top: '48%',
            textAlign: "center",
            left: "49%",
            textStyle: {
                color: '#fff',
                fontSize: 22,
                fontWeight: '400'
            }
        },
        tooltip: {
            show: false
        },
        graphic: {
            elements: [{
                type: "image",
                z: 3,
                style: {
                    image: imgURL,
                    width: 50,
                    height: 50
                },
                left: 'center',
                top: 'center',
            }]
        },
        legend: {
            show: false,
            icon: "circle",
            orient: 'horizontal',
            // x: 'left',
            data: ['火车', '飞机', '客车', '轮渡'],
            right: 0,
            top: 'center',
            align: 'left',
            // itemWidth: 10,
            // itemHeight: 10,
            textStyle: {
                color: "#fff"
            },
            itemGap: 20
        },
        toolbox: {
            show: false
        },
        series: [{
                type: 'pie',
                zlevel: 2,
                silent: true,
                radius: ['90%', '95%'],
                startAngle: 50,
                hoverAnimation: false,
                // animation:false,    //charts3 no
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie2()
            },
            // 
            {
                type: 'pie',
                zlevel: 3,
                silent: true,
                radius: ['86%', '88%'],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie2()
            },
            // 虚线
            {
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['80%', '84%'],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie3()
            },
            {
                name: '',
                type: 'pie',
                clockWise: false,
                radius: ['65%', '70%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < trafficWay.length; i++) {
                                    total += trafficWay[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== '') {
                                    return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                                } else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length: 30,
                            length2: 100,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            },
        ]
    }

    function _pie2() {
        let dataArr = [];
        for (var i = 0; i < 8; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0.5)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            } else {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            }

        }
        return dataArr

    }

    function _pie3() {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 25,
                    itemStyle: {
                        normal: {
                            color: "rgb(126,190,255)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            } else {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,0,0,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })
            }

        }
        return dataArr
    }

    //鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

    var timer;

    function doing() {
        let option = WdxjEcharts.getOption();
        option.series[1].startAngle = option.series[1].startAngle - 1;
        option.series[2].startAngle = option.series[2].startAngle + 1;
        WdxjEcharts.setOption(option);

    }

    function startTimer() {

        timer = setInterval(doing, 100);

    }

    function numb() {
        num = num + 5
        // WdxjEcharts.setOption(option, true)
    }
    setInterval(function () {
        numb()
    }, 100);
    setTimeout(startTimer, 500);

    WdxjEcharts.setOption(option)
    window.addEventListener('resize', function () {
        WdxjEcharts.resize()
    })
})()