vue3+echarts实现柱状图自动轮播

效果：使用vue3+echarts实柱状图每两秒滚动轮播一次，接口每五秒刷新一次

<template>
  <div ref="chart" style="min-width: 100%; height: 100%;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import {ReactionApi} from '@/api/echartsApi'
import { getFontSize } from '@/utils/fontSize'
const fontSize = getFontSize(18); // 自适应字体
const chart = ref()

onMounted(() => {
  init()
})
let endValue = window.timeSecEndValue-1
let myChart = null;
let emergencyDataX = ref([])
let emergencyDataY = ref([])
const updateData = async () => {
  let { data } = await ReactionApi();
  // 数据结构
  data = [
    {x:'分站1',y:'1323'},
    {x:'分站2',y:'998'},
    {x:'分站3',y:'1221'},
    {x:'分站4',y:'1411'},
    {x:'分站5',y:'1165'},
    {x:'分站6',y:'981'},
    {x:'分站7',y:'1230'},
    {x:'分站8',y:'888'},
    {x:'分站9',y:'987'},
  ]
  emergencyDataX.value = data.map(e => e.x);
  emergencyDataY.value = data.map(e => e.y);
};
const init = async () => {
  await updateData();
  if (myChart != null && myChart != "" && myChart != undefined) {
      myChart.dispose();//销毁
  }
  myChart = echarts.init(chart.value);
  let option = {
    dataZoom: [//滑动条
    {
      show: false,//是否显示滑动条
      type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      startValue: 0, // 从头开始。
      endValue: endValue  // 一次性展示n个。
    }
  ],
      grid: {
          left: '10',
          right: '10',
          top: '30%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
          type: 'category',
          data:emergencyDataX.value,
          axisTick: {
				show: false
			},
      axisLine: {
				lineStyle: {
					color: '#6ed3ff',
				}
			},
      axisLabel: {
				interval: 0,
				color: '#6ed3ff',
				fontSize: fontSize,
			},
      },
      yAxis: {
          type: 'value',
          axisLabel: {
              show: true,
				fontSize: fontSize,
        formatter: function (value) {
					return value.toString().replace(',', '');
				}
          },
          splitLine: {
        show: true, // 是否显示分隔线，默认数值轴显示
        lineStyle: {
          type: 'dashed',
          color: '#204756', // 分隔线颜色
          opacity: 1 // 分隔线透明度
        }
      },
      },
      series: [
          {
              data: emergencyDataY.value,
              type: 'bar',
              barWidth: '30%',
              label: {
                      show: true, //开启显示
                          color: '#fff',
                          fontSize: getFontSize(16)
                  },
              itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(18, 255, 255)' // 起始色
          },
          {
            offset: 1,
            color: 'rgba(86, 114, 199)' // 结束色
          }
        ]
      }
    },
          }
      ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
      myChart.resize();
  });
  setTimeout(scrollData, 2000); 
}

const scrollData = () => {
let firstElement = emergencyDataX.value.shift();
emergencyDataX.value.push(firstElement);

let firstData = emergencyDataY.value.shift();
emergencyDataY.value.push(firstData);

myChart.setOption({
  xAxis: {
    data: emergencyDataX.value
  },
  series: [{
    data: emergencyDataY.value
  }]
});

// 每2秒切换
setTimeout(scrollData, 2000);
};
// 每5秒获取新数据并更新图表
setInterval(async () => {
  await updateData()
}, window.carousel);
</script>

<style lang="less" scoped></style>