echarts轮播

1.设置一个echarts容器

在容器上加上@mouseenter="closeRotation" @mouseout="openRotation"两个方法 当鼠标移入时停止轮播,鼠标移走时继续轮播

<div class="top_body" id="myChart" @mouseenter="closeRotation" 
     @mouseout="openRotation">
</div>
<style>
 .top_body {
     width: 100%;
     height: 258px;
     position: relative;
     top: 0px;
    }
</style>
2.设置轮播开启与结束方法

在echarts完成初始化渲染之后就可以执行了

  //轮播开启
            openRotation() {
                let index = 0; //播放所在下标
                this.mTime = setInterval(()=> {
                    this.myCharts.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: index
                    });
                    index++;
                    if(index > xData.length) {
                        index = 0;
                    }
                }, 2000);
            },
            //关闭轮播
            closeRotation() {
                clearInterval(this.mTime)
            },

`

posted @ 2022-06-24 14:17  九月!!  阅读(381)  评论(0)    收藏  举报