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);});