饼图轮播效果

guanqb

2022-11-10 a96ac34771d0466229d87d433e14f923e71ffe1a

饼图轮播效果

 src/views/home/components/rightContainer.vue

@@ -73,6 +73,7 @@
<script>
let equipmentmyChart
let eventchangemychart
let timer

import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
@@ -133,6 +134,7 @@
        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
        this.equipmentEchartsCarousel()
    },
    methods: {
        actTabClick (type) {
@@ -228,6 +230,18 @@
                    y2: 20
                },
            }
        },

        equipmentEchartsCarousel () {
            let dataLen = this.getEquimentChartData(this.policeName).length
            let curIndex = 0
            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                curIndex = (curIndex + 1) % dataLen
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
            }, 1000)
        },

        initEventChangeEcharts () {
@@ -431,7 +445,7 @@
            eventchangemychart.dispose()
            eventchangemychart = null
        }

        clearInterval(timer)
    }
}
</script>