Echarts数据过多时加轮播展示

Echarts数据过多时加轮播展示，加上dataZoom后，在data中定义一个setTimer（定时器）变量。在option中定义这个定时器并使用。当切换页面时需要清掉这个定时器（避免有多个定时器干扰操作），并且在页面关闭的时候将这个定时器置为空。clearInterval(this.setTimer);

        // // 滚动配置
    // dataZoom: [
    //   {
    //     //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
    //     type: "inside",
    //     zoomOnMouseWheel: false, //滚轮是否触发缩放
    //     moveOnMouseMove: true, //鼠标滚轮触发滚动
    //     moveOnMouseWheel: true,
    //     xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
    //     startValue: 0, // 数据窗口范围的起始数值index
    //     endValue: 5// 数据窗口范围的结束数值index
    //   },
    //   {
    //     type: "slider", //隐藏或显示（true）组件
    //     show: false,
    //     backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
    //     fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
    //     borderColor: "rgb(19, 63, 100)", // 边框颜色
    //     showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
    //     startValue: 0,
    //     endValue: 5,
    //     filterMode: "empty",
    //     width: "80%", //滚动条高度
    //     height: 10, //滚动条显示位置
    //     left: "center",
    //     zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
    //     handleSize: 0, //控制手柄的尺寸
    //     bottom: 3 // dataZoom-slider组件离容器下侧的距离
    //   }
    // ],
    
    

定时器代码

     //轮播的定时器
  // this.setTimer = setInterval(() => {
  //   if (option.dataZoom[0].endValue == this.countarr.length - 1) {
  //     option.dataZoom[0].endValue = 5;
  //     option.dataZoom[0].startValue = 0;
  //   } else {
  //     option.dataZoom[0].endValue =
  //       option.dataZoom[0].endValue + 1;
  //     option.dataZoom[0].startValue =
  //       option.dataZoom[0].startValue + 1;
  //   }
  //   myChart.setOption(option);
  // }, 2000);