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

本文主要是介绍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);});

这篇关于echaerts图例自动滚动并隐藏翻页按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---