美文网首页
echats legend 单选模式轮播实现

echats legend 单选模式轮播实现

作者: zyqcoder | 来源:发表于2019-05-08 12:02 被阅读0次
  1. 设置legend属性:selectedModel: 'single'

  2. 使用myCharts.dispatchAction 来设置legend的聚焦

broadcast (v) {
          // 如果是false,则消灭轮播
            if (v === false) return clearInterval(this.timer) 
            // 获取legend的data
            const data = this.myChart.getOption().legend[0].data
            // 首次总是从0开始的
            let i = 0
            // 开始轮播
            this.timer = setInterval(() => {
                // 激活
                this.myChart.dispatchAction({ type: 'legendToggleSelect', name: data[ ++i % data.length ] })
            }, 3500)
}

相关文章

  • echats legend 单选模式轮播实现

    设置legend属性:selectedModel: 'single' 使用myCharts.dispatchAct...

  • 轮播图

    css轮播图实现 实现要点: laber标签和单选框的结合 E+F, E~F 类型选择器的使用 伪类选择符 E:c...

  • 轮播单边、循环模式切换写法

    轮播单边、循环模式切换基本写法 轮播单边、循环模式切换优化写法

  • 最常用的集中选择Dialog,集合!集合!!

    一、选择型Dialog的几种模式 单级单选模式 多级底部单选模式 多级单选模式 同上图一样,区别在于不是只有底部可...

  • 任务27 - jquery实战 - 轮播

    代码 实现如下轮播效果 展示、代码 实现上述轮播效果,在一个页面有三个轮播 展示、代码 实现如下无限循环滚动轮播效...

  • 类似淘宝首页轮播图的实现

    首页先上效果图 主要功能: 实现自动轮播与手动切换模式 设置自动轮播时间 支持点击事件 1.创建3个View,分别...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • Element UI 二次封装实现下拉树组件

    使用element ui 二次封装实现下拉树组件,可以搜索,可以动态绑定 一 实现效果图 1.1 单选模式 1.2...

  • 轮播

    轮播: UIScrollview轮播UICollectionView轮播 实现步骤: (1)添加并设置定时器(2)...

网友评论

      本文标题:echats legend 单选模式轮播实现

      本文链接:https://www.haomeiwen.com/subject/cxrmoqtx.html