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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你说的誓言°变失言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值