旋转的echarts饼图

<template>
    <div class="box">
        <div id="main" class="chart1"></div>
        <div id="toprightviewLines" class="chart"></div>
    </div>
</template>

<script>
import init from '@/components/Process/flowable/init';
import * as echarts from 'echarts';


export default {

    data() {
        return {
            alertData: []
        };
    },
    mounted() {
        this.getalertData()
    },

    methods: {
        // 告警监控
        getalertData() {
            this.alertData = [
                {
                    num: 1048,
                    text: '断电',
                },
                {
                    num: 735,
                    text: '低电',
                },
                {
                    num: 580,
                    text: '停留',
                },
                {
                    num: 484,
                    text: '离线',
                },
                {
                    num: 300,
                    text: '拆卸',
                },
                {
                    num: 484,
                    text: '驶入围栏',
                },
                {
                    num: 300,
                    text: '驶出围栏',
                },
            ]
            this.init()
            this.showpieLinex();
        },
        init() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            var data = this.alertData
            option = {
                // tooltip: {
                //     trigger: 'item',
                //     backgroundColor: 'transparent',
                //     textStyle: {
                //         color: '#fff'
                //     }
                // },
                legend: {
                    top: '0%',
                    right: 'right',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                    icon: 'circle',
                    formatter: function (name) {
                        let target
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].text === name) {
                                target = data[i].num
                            }
                        }
                        var arr = [
                            name + target
                        ]
                        return arr.join('  ')

                    }
                },
                series: [
                    {
                        name: '告警',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        center: ['37%', '52%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            fontSize: 15,
                            fontWeight: 'bold',
                            formatter: '{b}\n\n {c}'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 10,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '断电', itemStyle: { color: '#5B91FF' } },
                            { value: 735, name: '低电', itemStyle: { color: '#54FFC6' } },
                            { value: 580, name: '停留', itemStyle: { color: '#1890FF' } },
                            { value: 484, name: '离线', itemStyle: { color: '#FD5859' } },
                            { value: 300, name: '拆卸', itemStyle: { color: '#F6BD16' } },
                            { value: 484, name: '驶入围栏', itemStyle: { color: '#75F6FF' } },
                            { value: 300, name: '驶出围栏', itemStyle: { color: '#FF7C4A' } }
                        ],
                    }
                ]
            };

            option && myChart.setOption(option);
        },

        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: '#5c78a7', // 走过的颜色
                        }
                    }
                },
                {
                    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,1)',
                            shadowBlur: 30,
                            shadowColor: 'rgba(255,255,255,1)'
                        }
                    }
                }, {
                    value: 100 - tips,
                    itemStyle: {
                        normal: {
                            color: '#344285', // 未走的线的颜色
                        }
                    }
                }
                ];
            }

            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: ['65%', '75%'],
                        center: ['36%', '50%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: loading()
                    }]
                })
            }, 50);
        }
    },
};
</script>

<style lang="scss" scoped>
.box {
    width: 18vw;
    height: 20vh;
    display: flex;
    justify-content: space-around;

}

.chart {
    width: 16vw;
    height: 19vh;
    position: absolute;
    z-index: 2
}

.chart1 {
    width: 17vw;
    height: 18vh;
    position: absolute;
    z-index: 3
}
</style>