Vue2+ElementUI实现横向轮播的柱状图

1、效果图，截图是静态的，其实是动态轮播的效果

2、template代码

<template>
  <div class="main" id="bar"></div>
</template>

3、script代码

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      myChart: null,
      barChartData: [],
      // 柱状图轮播参数配置
      startValue: 0,
      endValue: 5,
      timeId: null
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.startInterval();
  },
  watch: {
    // 监听barChartData的变化
    barChartData: {
      handler(newVal, oldVal) {
        // 当barChartData变化时，重新初始化echarts图表
        this.initBarEcharts();
      },
      deep: true, // 如果数据是对象或数组，使用deep选项来深度监听
    },
    startValue: {
      handler(newVal, oldVal) {
        this.initBarEcharts();
      },
      deep: true,
    },
    endValue: {
      handler(newVal, oldVal) {
        this.initBarEcharts();
      },
      deep: true,
    },
  },
  methods: {
    // 获取支部缴费数据
    getData() {
      const res = axios.get("你的请求地址");
      res.then((response) => {
        this.barChartData = response.data
        //排序：可以实现从大到小的排序
        // this.barChartData.sort((a, b) => {
        //   return b.value - a.value;
        // })
      });
      // 异步操作失败时，执行的回调函数
      res.catch((error) => {
        console.log("请求失败:");
        console.log("error", error);
        console.log("请求失败响应对象获取", error.response);
      });
    },

    // 初始化柱状图
    initBarEcharts() {
      let that = this;
      // 获取x轴与y轴数据
      // 横坐标数据
      const valueX = that.barChartData.map((item) => {
        return item.value;
      });
      // 纵坐标数据
      const valueY = that.barChartData.map((item) => {
        return item.name;
      });
      this.myChart = echarts.init(document.getElementById("bar"));
      const option = {
        // 鼠标划过时显示数据
        tooltip: {
          trigger: "item", // 鼠标悬停时触发
          formatter: function (params) {
            // 这里的 params 是当前鼠标悬停的数据项的详细信息
            return `${params.name}: ${params.value}元`; // 显示系列名称和数据值
          },
        },
        textStyle: {
          fontSize: 14,
          fontStyle: "normal",
          fontWeight: "bold",
        },
        grid: {
          top: "5%",
          left: "5%",
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false }, // 隐藏 x 轴刻度标签
          axisTick: { show: false }, // 隐藏 x 轴刻度
          // 隐藏 x 轴分割线
          splitLine: {
            show: false,
          }, 
        },
        yAxis: {
          inverse: true, //根据自己的情况是否选择数组数据倒置排序
          type: "category",
          data: valueY,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false, // 隐藏 y 轴的刻度
          },
        },
        series: [
          {
            inverse: true,//根据自己的情况是否选择数组数据倒置排序
            type: "bar",
            data: valueX,
            // 柱状的颜色
            itemStyle: {
              color: function (params) {
                // 构建渐变色对象
                var colorLeft = "#326bf2"; // 左侧颜色
                var colorRight = "#43fec4"; // 右侧颜色
                var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: colorLeft },
                  { offset: 1, color: colorRight },
                ]);
                return color;
              },
              //设置柱子圆角
              borderRadius: [0, 20, 20, 0],
            },
            showBackground: true,
            backgroundStyle: {
              color: "#1c3040",
            },
            // 柱状的粗细
            barWidth: 10,
            label: {
              normal: {
                show: true,
                position: "right",
                // offset: [50, 0],
                formatter: "{c}元", // 标签内容格式器，{c} 表示系列数据的数值
                color: "#fff",
                fontSize: 14,
              },
            },
          },
        ],
        dataZoom: [
          {
            // 这部分是滚动条
            yAxisIndex: 0, //这里是从y轴的0刻度开始
            show: false, //是否显示滑动条，本次需求中，设置为false
            type: "inside", // 类型：内置型数据区域缩放组件
            startValue: that.startValue, // 从头开始
            endValue: that.endValue, // 一次性展示几个
            zoomOnMouseWheel: false, // 开启滚轮缩放
            moveOnMouseWheel: false, // 开启滚轮平移
          },
        ],
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", function () {
        this.myChart.resize();
      });
    },
    // 设置柱状图轮播效果
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        //设置循环，延时3s
        if (this.endValue > this.barChartData.length - 1) {
          (this.startValue = 0), (this.endValue = 5);
        } else {
          this.startValue++;
          this.endValue++;
        }
        if (this.myChart == null) {
          this.initBarEcharts();
        }
      }, 4000);
    },
  },
};
</script>

重点是dataZoom的设置与startInterval()方法，不过不要忘记watch监听数据的变化，否则达不到想要的轮播效果。