[JavaScript知识库]echarts图表xAxis、yAxis多个数据轮播问题未跟着轮播问题

一、问题如下

二、解决代码如下

 // 重点yAxisIndex为多个的话变为数组[]，轮播的变为1,哪个轴向为滚动条在dataZoom里面写哪个轴向yAxisIndex、xAxisIndex
    dataZoom: [
      //滑动条
      {
        yAxisIndex: [0, 1], //这里是从X轴的0刻度开始   // 重点
        show: false, //是否显示滑动条，不影响使用
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: configuration.endValue // 一次性展示6个。
      }
    ],    
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: list.xAxis
      },
      {
        type: 'category',
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: '12'
          },
          formatter: function (value) {
            return ((value * 10) / 10).toLocaleString() + configuration.unit
          }
        },
        data: list.yAxis
      }
    ],
    // 此轮播方法是根据项目而写、具体可以看已发布的文章
      timeOut = setInterval(() => {
      if (option.dataZoom[0].endValue === list.xAxis.length) {
        option.dataZoom[0].endValue = configuration.endValue
        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)

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖