echars横向柱状图 滚动

1. 问题描述
   循环展示，每次展示五个

<template>
  <div>
    <div id="test" style="width: 400px; height: 400px;">111</div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive } from 'vue';
const loop = reactive({
  current: 1,
  total: null,
  timerId: null,
  page:4
})
onMounted(() => {
  test()
  openTime()
})

const test = () => {
  const myChart = echarts.init(document.getElementById('test'));
  let list = [
    {
      name: 'name1',
      value: 10
    },
    {
      name: 'name2',
      value: 19
    },
    {
      name: 'name3',
      value: 38
    },
    {
      name: 'name4',
      value: 20
    },
    {
      name: 'name5',
      value: 5
    },
    {
      name: 'name6',
      value: 30
    },
    {
      name: 'name7',
      value: 40
    }
  ]

  list = list.sort((a, b) => {
    return b.value - a.value
  })
  // 总页数
  loop.total = list.length % (loop.page) == 0 ? list.length / (loop.page) : parseInt(list.length / loop.page) + 1;
  let arr = list.slice((loop.current - 1) * (loop.page), loop.current * (loop.page))
  let data = [], ydata = []

  
  arr.forEach(item => {
    data.push(item.name)
    ydata.push(item.value)
  })


  const option = {
    backgroundColor: '#000',
    tooltip: {
      trigger: 'axis',
      show: false,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      show: false
    },
    grid: {
      left: '3%',
      right: '10%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      splitLine: {
        show: false
      },
      type: 'value',
      show: false,
    }],
    yAxis: [{

      splitLine: {
        show: false
      },
      axisLine: { //y轴
        show: false
      },
      type: 'category',
      axisTick: {
        show: false
      },
      inverse: true,
      data: data,
      axisLabel: {
        color: '#A7D6F4',
        fontSize: 14,
      }
    }],
    series: [{
      name: '标准化',
      type: 'bar',
      barWidth: 12, // 柱子宽度
      label: {
        show: true,
        position: 'right', // 位置
        color: '#A7D6F4',
        fontSize: 14,
        distance: 15, // 距离
        formatter: '{c}' // 这里是数据展示的时候显示的数据
      }, // 柱子上方的数值
      itemStyle: {
        // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          offset: 0,
          //   color: '#8bd46e'
          color: '#fccb05'
        }, {
          offset: 1,
          // color: '#09bcb7'
          color: '#f5804d'
        }], false), // 渐变
      },
      data: ydata
    },]
  };

  myChart.setOption(option);
}
// 定时器切换
const openTime = () => {
  if (loop.timerId) {
    clearInterval(loop.timerId)
  }
  loop.timerId = setInterval(() => {
    if (loop.current < loop.total) {
      loop.current++;
    } else {
      loop.current = 1
    }
    test()
  }, 6000)
}

</script>

<style lang="scss" scoped>

</style>