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

 背景：实现柱状图自动滚动效果

效果图

 <div
    ref="chartARef"
    id="chart-panel"
    style="width: 100%; height: 300px"
></div>

绘制图表

const chartARef = ref();
const drawScenicAreaDataAnalysis = () => {
  if (
    myChart.value != null &&
    myChart.value != "" &&
    myChart.value != undefined
  ) {
    myChart.value.dispose(); //销毁
  }
  myChart.value = echarts.init(chartARef.value);
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: "0",
      top: "10",
      right: "6%",
      bottom: "15",
      containLabel: false, //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      //直角坐标系grid中的x轴,
      //一般情况下单个grid组件最多只能放上下两个x轴,
      //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
      type: "value", //坐标轴类型,分别有：
      //'value'-数值轴；'category'-类目轴;
      //'time'-时间轴;'log'-对数轴
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
        },
      }, //坐标轴在 grid 区域中的分隔线
      axisLabel: { show: false }, //坐标轴刻度标签
      axisTick: { show: false }, //坐标轴刻度
      axisLine: { show: false }, //坐标轴轴线
      // inverse:true
    },
    yAxis: {
      type: "category",
      inverse: true,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        color: "#333333",
        fontSize: 14,
        // 刻度标签与轴线之间的距离。
        margin: 10,
        // 刻度标签文字的颜色
        /*
								文字水平对齐方式，默认自动。
									'left'
									'center'
									'right'
							*/
        align: "left",
        /*
								文字垂直对齐方式，默认自动。
									'top'
									'middle'
									'bottom'
							*/
        verticalAlign: "bottom",
        // y 轴的位置。 'left' 'right'
        position: "right",
        // 文字块的内边距
        padding: [0, 0, 10, 10],
        formatter: function (value, index) {
          // console.log(item, "item");
          //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
          return chartDataA.value[index].sort + "  " + DataX.value[index];
        },
      },
      data: DataX.value, //类目数据，在类目轴（type: 'category'）中有效。
      //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
    },
    series: [
      //系列列表。每个系列通过 type 决定自己的图表类型
      {
        name: "", //系列名称
        type: "bar", //柱状、条形图
        barWidth: 14, //柱条的宽度,默认自适应
        data: DataY.value,

        label: {
          //图形上的文本标签
          show: true,
          position: "right", //标签的位置
          formatter: "{c}{a}", //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
          color: "#A2A2A2", //标签字体颜色
          fontSize: 16, //标签字号
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        itemStyle: {
          //图形样式
          normal: {
            //normal 图形在默认状态下的样式;
            //emphasis图形在高亮状态下的样式
            barBorderRadius: 10, //柱条圆角半径,单位px.
            //此处统一设置4个角的圆角大小;
            //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#266DF5", //柱图渐变色起点颜色
              },
              {
                offset: 1,
                color: "#3BA5FD", //柱图渐变色终点颜色
              },
            ]),
          },
        },
        // datasetIndex: 1,
        // zlevel: 1, //柱状图所有图形的 zlevel 值,
        //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
      },
    ],

    // 滚动条
    dataZoom: [
      {
        // 是否显示 组件
        show: false,
        type: "slider",
        // 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。
        // 'horizontal'：水平。 'vertical'：竖直。
        orient: "vertical",
        // 数据窗口范围的起始数值。
        startValue: 0,
        // 数据窗口范围的结束数值。
        endValue: 6,
      },
    ],
  });
  window.onresize = function () {
    // 自适应大小
    myChart.value.resize();
  };
  setTimeout(scrollData, 2000);
};

const scrollData = () => {
//这里判断了柱状图大于6个才会滚动
  if (chartDataA.value.length > 6) {
    let firstElement = DataX.value.shift();
    DataX.value.push(firstElement);
    let firstData = chartDataA.value.shift();
    chartDataA.value.push(firstData);
    myChart.value.setOption({
      yAxis: {
        axisLabel: {
          color: "#333333",
          fontSize: 14,
          // 刻度标签与轴线之间的距离。
          margin: 10,
          // 刻度标签文字的颜色
          /*
								文字水平对齐方式，默认自动。
									'left'
									'center'
									'right'
							*/
          align: "left",
          /*
								文字垂直对齐方式，默认自动。
									'top'
									'middle'
									'bottom'
							*/
          verticalAlign: "bottom",
          // y 轴的位置。 'left' 'right'
          position: "right",
          // 文字块的内边距
          padding: [0, 0, 10, 10],
          formatter: function (value, index) {
            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            return chartDataA.value[index].sort + "  " + DataX.value[index];
          },
        },
        data: DataX.value, //类目数据，在类目轴（type: 'category'）中有效。
        //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
      },
      series: [
        {
          data: chartDataA.value,
        },
      ],
    });

    // 每2秒切换

    setTimeout(scrollData, 2000);
  } else {
    myChart.value.setOption({
      yAxis: {
        axisLabel: {
          color: "#333333",
          fontSize: 14,
          // 刻度标签与轴线之间的距离。
          margin: 10,
          // 刻度标签文字的颜色
          /*
								文字水平对齐方式，默认自动。
									'left'
									'center'
									'right'
							*/
          align: "left",
          /*
								文字垂直对齐方式，默认自动。
									'top'
									'middle'
									'bottom'
							*/
          verticalAlign: "bottom",
          // y 轴的位置。 'left' 'right'
          position: "right",
          // 文字块的内边距
          padding: [0, 0, 10, 10],
          formatter: function (value, index) {
            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            return chartDataA.value[index].sort + "  " + DataX.value[index];
          },
        },
        data: DataX.value, //类目数据，在类目轴（type: 'category'）中有效。
        //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
      },
      series: [
        {
          data: chartDataA.value,
        },
      ],
    });
  }
};

效果：代码里加了大于6条才会滚动的判断，先放一个静态图