echarts柱状图过长平滑移动

260 阅读1分钟

option配置

 dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条,不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 开始位置。
        endValue: 5, // 一次性展示几个。
      },
    ],

添加定时器控制滚动条位置

setInterval(() => {
    // 每次向后滚动一个,最后一个从头开始。
    //判断是否滑动到最后一条数据,若是,则重置柱状图(显示前6条数据)
    if (option.dataZoom[0].endValue == currData.value.length / 2 - 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)
  }, 3000)
  // (添加监听器监测页面变化,不然会黑屏后直接加载下一状态,看不出移动效果)
  window.addEventListener('resize', function () {
    myChart.resize()
  })