您的位置:首页 > 教育 > 培训 > echaerts图例自动滚动并隐藏翻页按钮

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

2024/10/31 9:51:07 来源:https://blog.csdn.net/qq_47657875/article/details/139499680  浏览:    关键词: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);});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com