当前位置: 首页 > article >正文

【Echarts图轮播显示label】

Echarts图轮播每隔几秒显示label

  • 设置label显示
  • 设置定时任务

设置label显示

series: [
         label: {
              show: false, //不高亮时设置为不显示
            },
            emphasis: {
              label: {
                show: true //高亮时设置为显示
              }
            },
]

设置定时任务

 /**
     @params dom dom元素
     @params chartOption echarts的Option
     @params timer 定时器
     */
    setTimerToolTips(dom, chartOption, timer) {
      clearInterval(timer); //清除定时器,防止轮播出现混乱
      let index = -1;
      timer = setInterval(() => {
      //设置为不高亮
        dom.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index
        });
        index = (index + 1) % chartOption.series[0].data.length; //计算索引
        //设置为高亮,高亮时会自动展示相关label
        dom.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
        //当lengend过多时进行分页滚动
        dom.dispatchAction({
          type: 'legendScroll',
          scrollDataIndex: index,
        })
      }, 5000);
    },

http://www.kler.cn/a/392229.html

相关文章:

  • 【最新版】Stable Diffusion4.9(AI绘画)下载及安装教程(附软件安装包)!
  • uni-app移动端与PC端兼容预览PDF文件
  • JSON-RPC-CXX深度解析:C++中的远程调用利器
  • 算法——二分查找(leetcode704)
  • Qt 获取当前系统中连接的所有USB设备的信息 libudev版
  • TDesign了解及使用
  • PHP动物收容所管理系统-计算机设计毕业源码94164
  • 初阶C++之C++入门基础
  • OKG Research:用户意图驱动的Web3应用变革
  • 系统架构设计师论文:论湖仓一体架构及其应用
  • ECharts实现数据可视化入门详解
  • 技术专家之路:深耕高门槛领域的策略
  • Tangram利用深度学习完成空间与单细胞数据的整合
  • 电脑浏览器打不开网页怎么办 浏览器无法访问网页解决方法
  • 模型减肥秘籍:模型压缩技术 CNN基础
  • docker运行ActiveMQ-Artemis
  • 第三十七章 Vue之编程式导航及跳转传参
  • 边缘计算在智能交通系统中的应用
  • 在码上飞用自然语言开发软件,按效果付费,不好用我买单!
  • Angular 和 Vue2.0 对比
  • 文献解读-DNAscope: High accuracy small variant calling using machine learning
  • Vue实际应用之无限滚动、css之、混合宏和~
  • 密码学基础 -- RSA-PSS盐值长度大揭秘
  • 机器学习—模型评估
  • 【日常记录-Java】代码配置Logback
  • GitHub每日最火火火项目(11.13)