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

echaerts图例自动滚动并隐藏翻页按钮

效果图

 

代码

    legend: {itemHeight: 14,itemWidth: 14,height: "300", //决定显示多少个// 通过 CSS 完全隐藏翻页按钮pageButtonItemGap: 0,pageButtonPosition: 'end',pageIconColor: 'transparent', // 隐藏翻页按钮pageIconInactiveColor: 'transparent', // 隐藏翻页按钮pageIconSize: 0, // 隐藏翻页按钮pageTextStyle: {color: 'transparent' // 隐藏翻页按钮的文字} ,icon: "rect",orient: 'vertical',type: 'scroll',  //必须top: 'center',right: 0,data: legend},

 

  // 获取图例的总页数var totalPage = myChart.getOption().legend[0].pageIconInactiveColor;var currentPage = 0;function autoScroll() {myChart.dispatchAction({type: 'legendScroll',scrollDataIndex: currentPage * 5   //一下滚动几个});currentPage++;if (currentPage * 5 >= option.legend.data.length) {currentPage = 0;}}clearInterval(timer)timer = setInterval(autoScroll, 3000);myChart.on('click', function () {clearInterval(timer);timer = setInterval(autoScroll, 3000);});

http://www.lryc.cn/news/365076.html

相关文章:

  • OpenCV的小部件最基本范例
  • 内置类型知多少?
  • 【C++题解】1090 - 同因查找
  • uni微信小程序editor富文本组件如何插入图片
  • LabVIEW调用国产硬件DLL的稳定性问题及解决方案
  • 基础篇01——SQL的基本语法和分类
  • HOW - 面试技巧系列 - 全英文面试
  • 【人工智能】第六部分:ChatGPT的进一步发展和研究方向
  • 新能源管理系统主要包括哪些方面的功能?
  • python如何快速的判断一个key在json的第几层呢,并修改其value值
  • Python基础用语:揭示编程世界的底层逻辑与无限可能
  • react 中使用 swiper
  • 2024年搭建知识库系统5大工具推荐
  • Golang内存分配分三种Golang内存分配分三种类型
  • Marin说PCB之如何在主板上补偿链路中的走线的等长误差?
  • 企业在现代市场中的战略:通过数据可视化提升财务决策
  • printf(“不喝酒就没得朋友可是只要偶一喝酒就喝倒一代朋友人生真的很矛盾“);
  • JAVA小案例-分别计算100以内奇数和偶数的和
  • 头歌初识redis答案
  • Linux.小技巧快捷键
  • 传统的老程序员转向人工智能需要准备好这三件事情,你知道吗?
  • ICPC2024 邀请赛西安站(7/8/13)
  • STM32f103实现按键长按 短按 双击
  • 【WP】猿人学13_入门级cookie
  • 分享一款提取抖音小店商家电话的软件使用教程
  • 反转链表的三种方法--面试必考(图例超详细解析,小白一看就会!!!)
  • Springboot注意点
  • 数组和指针的联系(C语言)
  • 安全区域边界
  • 力扣每日一题 6/6