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 @   九月!!  阅读(371)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示