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