前端玩玩--Echarts饼图自动轮播效果

这是我的第一篇掘金博客，开启掘金写作之路 实现Echarts饼图自动轮播效果；鼠标移入停止自动轮播并定位到指针位置；鼠标移出继续自动轮播

```<!--
  作者: Carl Chen
-->
<template>
    <div style="height:100%; width:100%">
        <v-chart :option="deptCurrentIncomeOption" ref="waoChart"/>
    </div>
</template>

<script>

let dcyiIntervalHandle = null;
let dcyiSeriesLength = 0;
let dcyiCurIndex = 0;

export default {
    components: {
        GobalConstant
    },
    data() {
        return {
            deptCurrentIncomeOption: {},
            color: ['#0CD2E6','#3c59fd','#ffdb5c','#886EFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'],
            legendOrigin: ['AAAA','BBBB','CCCC','DDDD'],
            legend: [],
            legendPoTop: '24%',
            legendPoGrap: 34,
            seriesData: [520.32, 651.23, 841.29, 486.02],
            incomeData: [18536.20],
            intervalHandleBot: "",
            intervalHandleDow: "",
            myChart: "",
        }
    },
    methods: {
        deptCurrentIncomeRender () {
            this.deptCurrentIncomeOption = {
                color: this.color,
                title: {
                    text: '收入占比 (单位：万元)',
                    textStyle: {
                        fontSize: 16,
                        color: '#E6E6FF'
                    },
                    left: '1%',
                    top: '3%'
                },
                grid: {
                    top: '15%',
                    left: 0,
                    right: '1%',
                    bottom: 5,
                    containLabel: true,
                },
                series: [
                {
                    type: 'pie',
                    center: ['50%', '58%'],
                    radius: ['29%', '44%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            formatter: function(a) {
                                return '{label|' + a.name +':}{rate|' + a.percent + '%}\n{value|' + a.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' }';
                            },
                            rich: {
                                rate: {
                                    color: '#fff',
                                    padding: 5,
                                    align: 'right',
                                    verticalAlign: 'middle',
                                    fontSize: 14,
                                },
                                label: {
                                    color: '#fff',
                                    align: 'right',
                                    verticalAlign: 'middle',
                                    fontSize: 14,
                                },
                                value: {
                                    color: '#0dbc79',
                                    align: 'right',
                                    verticalAlign: 'middle',
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    padding: 5
                                }
                            },
                        },
                    },
                    labelLine: {
                        show: true,
                        showAbove: true,
                        smooth: 0.2,
                        length: 20,
                        length2: 10,
                    },
                    data: this.seriesData,
                },
                {
                    name: '总数',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '25%'],
                    center: ['50.2%', '58.3%'],
                    itemStyle: {
                        color: '#D5617D',  // 中间颜色
                    },
                    label: {
                        normal: {
                            show: true,
                            color: '#fff',
                            position: 'center',
                            fontSize: '18px Microsoft YaHei',
                            formatter: function(a) {
                                return '总计' + '\n' + a.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: this.incomeData
                }
                ],
            }
        },
        getDataFromBack() {
           dcyiSeriesLength = this.seriesData.length;
           this.deptCurrentYearIncomeRender();
        },
        pipeAnimationSelf(myChart, time) {   // 自动轮播效果切换函数
            if (dcyiIntervalHandle) {
                window.clearInterval(dcyiIntervalHandle)
                dcyiIntervalHandle = null;
            }
            dcyiIntervalHandle = window.setInterval(() => {
                myChart.dispatchAction({ 
                    type: 'downplay', seriesIndex: 0, dataIndex: dcyiCurIndex 
                });
                dcyiCurIndex = (dcyiCurIndex + 1) % dcyiSeriesLength
                myChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: dcyiCurIndex
                });
            }, time);
            // 鼠标移入效果
            myChart.on('mouseover', function (param) {
                window.clearInterval(dcyiIntervalHandle);
                dcyiIntervalHandle = null;
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: dcyiCurIndex
                })
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                })
                dcyiCurIndex = param.dataIndex;
            })
            // 鼠标移出效果
            myChart.on('mouseout', function (param) {
                dcyiCurIndex = param.dataIndex;
                if (dcyiIntervalHandle) {
                    window.clearInterval(dcyiIntervalHandle);
                    dcyiIntervalHandle = null;
                }
                dcyiIntervalHandle = window.setInterval(() => {
                    myChart.dispatchAction({ 
                        type: 'downplay', seriesIndex: 0, dataIndex: dcyiCurIndex 
                    });
                    dcyiCurIndex = (dcyiCurIndex + 1) % dcyiSeriesLength
                    myChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: dcyiCurIndex
                    });
                }, time);
            })
        }
    },
    mounted () {
        // 动态获取数据
        this.getDataFromBack()
    },
    destroyed() {
        clearInterval(dcyiIntervalHandle);
        clearInterval(this.intervalHandleBot);
        clearInterval(this.intervalHandleDow);
    }
}
</script>

<style lang="scss" scoped>
    .test {
        border: 1px solid rgba(25,186,139,.17)
    }

    .net_value {
        width: 100%;
        margin-top: -16%;
    }

    .income_total{
        width:26%; 
        text-align:right; 
        float:left; 
        margin-top:6.5%;
        font-size: 22px;
    }

    .income_number{
        width:65%; 
        float:left; 
        margin-top:-6%;
    }

    .income_unit{
        width: 9%; 
        text-align: left; 
        margin-top: 5.2%; 
        float: left; 
        color:#0dbc79; 
        font-size: 30px;
    }

</style>>