X轴可自行滚动的柱状图

<template>
  <div class="echartsDiv">
    <div ref="echartsCont" class="echarts_cont"></div>
  </div>
</template>

<script>
export default {
  name: "left1Echarts",

  mixins: [],

  inject: ["echarts"],

  components: {},

  props: {
    datas: {
      type: Object,
    },
    activeTab: {
      type: String,
    },
  },
  watch: {
    activeTab: {
      immediate: true,
      handler(val) {
        console.log(val);
        if (val) {
          this.propertyRate();
        }
      },
    },
  },

  data() {
    return {
      echartsCont: null,
      timer: null,
      echartData: {
        xData: [],
        yData: [9, 90, 50, 30, 80,90],
        yData1: [20,30,40,50,60,70],
        yData2: [],
      },
      // 新增 dataZoom 起始和结束位置
      dataZoomStart: 0,
      dataZoomEnd: 30,
      // 新增每次滚动的步长
      dataZoomStep: 2
    };
  },

  mounted() {
     this.$nextTick(() => {
       this.propertyRate();
     })
  },
  beforeUnmount() {
      // 组件卸载时清除定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
      // 清除 dataZoom 定时器
      if (this.dataZoomTimer) {
        clearInterval(this.dataZoomTimer);
      }
    },
  methods: {
    propertyRate() {
      this.getechartsData();
         // 启动 dataZoom 定时器
         this.startDataZoomTimer();
    },
    // init() {
    //   setTimeout(() => {
    //     this.echartsCont = this.echarts.init(this.$refs.echartsCont);
    //     this.getechartsData();
    //   }, 500);
    // },

    // echarts渲染
    getechartsData() {
      console.log(this.echartData);
      let xAxis = this.echartData.xData,
        yData = this.echartData.yData,
        yData1 = this.echartData.yData1,
        yData2 = this.echartData.yData2;
      this.echartsCont = this.echarts.init(this.$refs.echartsCont);
      this.setEchartsOption({ xAxis, yData, yData1, yData2 });
    },

    setEchartsOption({ xAxis, yData, yData1, yData2 }) {
      this.echartsCont.clear();
      this.echartsCont.setOption({
        grid: {
          top: "18%",
          left: "13%",
          right: "10%",
          bottom: "25%",
        },
        color: ["#F5D62B", "#318DFA", "#43FAF4"],
        legend: {
          show: true,
          right: 5,
          top: 10,
          // 设置图例标记宽度
          itemWidth: 12,
          // 设置图例标记高度
          itemHeight: 12,
          // 设置圆角为 0，保证是正方形
          borderRadius: 0,
          textStyle: {
            fontSize: 12,
            fontFamily: "Source Han Sans CN",
            fontWeight: 400,
            color: "#7BA0B3",
            padding: [0, 0, 0, 13],
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(4,67,116,0.7)",
          borderColor: "rgba(22,229,254,0.6)",
          padding: [10, 17, 17, 32],
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontFamily: "Source Han Sans CN",
            fontWeight: 400,
          },
          axisPointer: {
            lineStyle: {
              color: "rgba(4,187,255,0.2)",
            },
          },
          // formatter: "{b}<br />{a} ：{c}",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "rgba(157,170,187,0.5)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              fontFamily: "Source Han Sans CN",
              fontWeight: 400,
              color: "rgba(157,170,187,0.5)",
              margin: 10,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            // interval: 5,

            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(157,170,187,0.5)",
              },
            },
            axisLine: {
              show: false,
            },

            axisLabel: {
              formatter: "{value} %",
            },
            axisLabel: {
              fontSize: 12,
              fontFamily: "Source Han Sans CN",
              fontWeight: 400,
              color: "#7BA0B3",
              margin: 10,
              formatter: "{value} %",
            },
          },
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                type: "solid",
                color: "rgba(8, 52, 91,0.8)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              fontFamily: "Source Han Sans CN",
              fontWeight: 400,
              color: "#fff",
              margin: 10,
            },
            boundaryGap: false,
            splitArea: {
              show: false,
            },
          },
        ],
         // 添加 dataZoom 组件
         dataZoom: [
          {
            show:false,
            type: 'slider', // 滑动条类型的 dataZoom
            xAxisIndex: 0, // 关联第一个 x 轴
            // start: 0, // 初始化显示数据的起始百分比
            // end: 30, // 初始化显示数据的结束百分比
            // 使用 dataZoomStart 和 dataZoomEnd 动态设置起始和结束位置
            start: this.dataZoomStart,
            end: this.dataZoomEnd,
            bottom: 10, // 滑动条距离底部的距离
            height: 10, // 滑动条高度
            borderColor: 'transparent', // 滑动条边框颜色
            backgroundColor: 'rgba(157,170,187,0.3)', // 滑动条背景颜色
            fillerColor: 'rgba(4,187,255,0.6)', // 选中区域颜色
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', // 滑块图标
            handleSize: '120%', // 滑块大小
            handleStyle: {
              color: '#fff', // 滑块颜色
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            textStyle: {
              color: '#7BA0B3' // 文本颜色
            }
          },
          {
            type: 'inside', // 内置型 dataZoom，支持鼠标滚轮和手势缩放
            xAxisIndex: 0, // 关联第一个 x 轴
            zoomOnMouseWheel: true, // 鼠标滚轮缩放
            moveOnMouseMove: true, // 鼠标拖动平移
            moveOnMouseWheel: false // 鼠标滚轮不触发平移
          }
        ],
        series: [
          {
            name: "2023",

            type: "bar",
            smooth: true, //是否平滑
            barWidth: 6,
            itemStyle: {
              padding: 20,
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(203, 191, 53,0)", // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: "RGB(203, 191, 53)", // 渐变结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: yData,
          },
          {
            name: "2024",

            type: "bar",
            smooth: true, //是否平滑
            barWidth: 6,

            itemStyle: {
              padding: 20,
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(45, 205, 207,0)", // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(45, 205, 207,1)", // 渐变结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: yData1,
          },
          {
            name: "2025",

            type: "bar",
            smooth: true, //是否平滑
            barWidth: 6,
            itemStyle: {
              padding: 20,
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(24, 82, 215,0)", // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(24, 82, 215,1)", // 渐变结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: yData2,
          },
        ],
      });
    },
      // 启动 dataZoom 定时器
      startDataZoomTimer() {
      if (this.dataZoomTimer) {
        clearInterval(this.dataZoomTimer);
      }
      this.dataZoomTimer = setInterval(() => {
        // 更新 dataZoom 的起始和结束位置
        this.dataZoomStart += this.dataZoomStep;
        this.dataZoomEnd += this.dataZoomStep;
        // 检查是否滚动到末尾，如果是则重置
        if (this.dataZoomEnd >= 100) {
          this.dataZoomStart = 0;
          this.dataZoomEnd = 30;
        }
        // 使用 dispatchAction 动态改变 dataZoom 状态
        this.echartsCont.dispatchAction({
          type: 'dataZoom',
          xAxisIndex: 0,
          start: this.dataZoomStart,
          end: this.dataZoomEnd
        });
      }, 1000); // 每 1 秒滚动一次，可根据需要调整
    },
  },
};
</script>

<style scoped lang="scss">
.echartsDiv {
  height: 100%;
  position: relative;

  .echarts_cont {
    height: 100%;
  }
}
</style>