echarts图表的轮播滑出

1，这边数据是整合在一个大数组里面的

<template>
    <div>
        <div v-for="(item,index) in imgArr" :key="index" v-show="item.id === currentIndex">
            <div :id="'lunbo3' + index" :class="showw ? 'show' : ''" style="width: 320px;height: 220px;background: #FFFFFF;left:20px;">
            </div>
        </div>
    </div>
</template>

<script>
import Echarts from 'echarts'
import { autoHover } from '../homePage/tool'
export default {
    data(){
        return{
            showw:false,
            tootipTimer:10,
            currentIndex :0,//当前所在图片下标
            timer:null,//定时轮询
            // imgArr:[
            //     {	id:0,
            //         seriesData: [454, 886, 367, 278, 567, 454, 886, 367, 278, 567],
            //         yAxisData: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
            //         yDataMax: 1000,
            //         yDataMin: 0,
            //     },{
            //         id:1,
            //         seriesData: [112, 223, 334, 445, 556, 667, 778, 778, 889, 349],
            //         yAxisData: ['医院1', '医院2', '医院3', '医院4', '医院5', '医院6', '医院7', '医院8', '医院9', '医院10'],
            //         yDataMax: 1000,
            //         yDataMin: 0,
            //     },
            // ]
            imgArr:[
                {	id:0,
                    seriesData: [43, 82, 36, 27, 56, 45, 88, 37, 28, 57],
                    yAxisData: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
                    yDataMax: 100,
                    yDataMin: 0,
                },{
                    id:1,
                    seriesData: [12, 23, 33, 45, 29, 67, 78, 78, 89, 39],
                    yAxisData: ['医院1', '医院2', '医院3', '医院4', '医院5', '医院6', '医院7', '医院8', '医院9', '医院10'],
                    yDataMax: 100,
                    yDataMin: 0,
                },
            ]

        }
    },
    props:{
        CircularGraph2:{
            type:Array
        },
        CompletePercent:{
            type:String
        },
    },
    created(){
        
    },
    mounted(){
        let Create2 =
            setTimeout(() => {
            clearTimeout(Create2)
            // this.CircularGraphData()
            // this.imgArr.forEach((itt,index)=>{
            //     this.CircularGraphData(index)
            // })
        }, 500)
        this.imgArr.forEach((itt,index)=>{
            this.CircularGraphData(index)
        })
        this.startInterval()
    },
    methods:{
        //开启定时器
        startInterval(){
            console.log(544)
            // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.currentIndex++;
                if(this.currentIndex > this.imgArr.length-1){
                    this.currentIndex = 0
                }
                this.showw = true;
            },7000)
        },
        CircularGraphData(index){
            console.log(64,index)
            var chartDom = document.getElementById('lunbo3' + index);
            var myChart = Echarts.init(chartDom);
            var option;

            // let myChart2 = this.$echarts.init(document.getElementById('commentChart'))
        //    let downLoadChartsData ={
        //         seriesData: [454, 886, 367, 278, 567, 454, 886, 367, 278, 567],
        //         yAxisData: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
        //         yDataMax: 1000,
        //         yDataMin: 0
        //     }
            // let yAxisData = ['分类1', '分类2', '分类3', '分类4', '分类5', '分类1', '分类2', '分类3', '分类4', '分类10']
            option = {
                textStyle: {
                // fontSize: arr.initHeight,
                color: '#17233D'// 字体颜色
                },
                tooltip: {
                // 悬停指示
                trigger: 'item',
                formatter: '{b}  <b>{c}</b>',
                backgroundColor: '#FFFFFF',
                textStyle: {
                    fontSize: 14,
                    padding: 20,
                    color: '#515A6E'// 字体颜色
                }
                //   formatter: function (params) {
                //      return params[0].name + ': ' + params[0].value+"%";
                //   },
                },
                yAxis: {
                    data: this.imgArr[index].yAxisData,
                    // axisTick: { // x轴刻度线
                    //     show: false
                    // },
                    // splitLine: { // 网格线
                    //     show: false
                    // },
                    // axisLine: { // 坐标轴线
                    //     show: false
                    // },
                    inverse:true,
                    axisLabel: { // 调整文字倾斜角度(rotate=xxx)和颜色
                        interval: 0,
                        margin: 16,
                        textStyle: {
                        color: '#17233D',
                        fontSize: 14
                        }
                    }
                },
                xAxis: {
                    show: false,
                    max: this.imgArr[index].yDataMax,
                    min: this.imgArr[index].yDataMin,
                    position: 'right'
                },
                grid: {
                    left: 24,
                    right: 24,
                    bottom: 16,
                    top: 24,
                    containLabel: true
                },
                series: [{
                    name: '收缴率',
                    type: 'bar',
                    stack: '使用情况',
                    data: this.imgArr[index].seriesData,
                    barWidth: 8, // 柱图宽度
                    barGap: 36, // 柱图之间的间距
                    // 标签
                    label: {
                        normal: {
                        show: true,
                        fontSize: 14,
                        position: 'right',
                        // offset: [450, 0],
                        formatter: '{c}' + '%' // 模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                        }
                    },
                    showBackground: true,
                    backgroundStyle: {
                        color: '#CDEDDD',
                        barBorderRadius: [0, 100, 100, 0]
                    },
                    itemStyle: {
                        normal: {
                        color: '#0c48e5',
                        // 设置柱子圆角
                        barBorderRadius: [0, 100, 100, 0]
                        }
                    },
                    markPoint: {
                        symbol: 'pin', // 标记类型
                        symbolSize: 10, // 图形大小
                        itemStyle: {
                        normal: {
                            borderColor: 'green',
                            borderWidth: 1, // 标注边线线宽，单位px，默认为1
                            label: {
                            show: true,
                            fontSize: 14
                            }
                        }
                        }
                    }
                    },
                    {
                    name: '',
                    type: 'bar',
                    stack: '使用情况',
                    // data: [100, 100, 100, 100, 100],
                    itemStyle: {
                        barBorderRadius: [0, 100, 100, 0] // 统一设置四个角的圆角大小
                    }
                }
                ]
            }
            option && myChart.setOption(option);
            // myChart.setOption(option, true);
            // this.tootipTimer && this.tootipTimer.clearLoop(); // this.tootipTimer 在data里定义
            // this.tootipTimer = 0;
            // this.tootipTimer = autoHover(myChart, option, 14, 3000);
            // tools.loopShowTooltip(myChart, option, {loopSeries: true });

        }
    },
}
</script>

<style>
.show{
    animation:fadenum 7s infinite;
}
@keyframes fadenum{
  100%{transform:translateX(300px);}  
  /* //以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
  为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
  还有transform属性用于设置图片滑动的动作。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 */
}
</style>