echarts柱状图轮播

写一个盒子放图表

<div id="chart7"></div>

定义初始char7数据

添加监听

  watch: {
    char7: {
      handler(newV) {
        let list = newV;
        if (!list) {
          return;
        }
        if (this.myChart) {
          this.myChart.dispose(); //销毁
        }
        this.myChart = null;
        this.$nextTick(() => {
          let x = [],
            list1 = [];
          list.forEach((item) => {
            x.push(item.day); //x轴数据
            list1.push(item.falseAlarm); //y轴数据
          });
          this.listX = x; //所有x轴数据
          this.list1 = list1; //所有y轴数据
          this.page = 3; //每页轮播的个数
          if (x.length > 3) {
            x = x.slice(0, 3); //每次轮播x轴数据
            list1 = list1.slice(0, 3); //每次轮播y轴数据
          }
          this.myChart = echarts.init(document.getElementById("chart7")); //获取盒子创建画布
          const options = {
            // 悬浮时提示
            tooltip: {
              trigger: "item", //坐标轴触发
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            //图表距离画布边缘的距离
            grid: {
              left: "15%",
              top: "12%",
              right: "0%",
              bottom: "25%",
            },
            xAxis: {
              type: "category",
              data: x,
              axisLabel: {
                interval: 0, //显示所有x轴标签
                textStyle: {
                  fontSize: 12, //x轴字体大小
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#fff", //x轴颜色
                  width: 1, //x轴宽度
                },
              },
            },
            yAxis: {
              type: "value",
              name: "单位：万元",
              splitLine: {
                lineStyle: {
                  color: ["#696969"], //平行于x轴的线，可写多个表隔行颜色
                },
              },
              axisLabel: {
                textStyle: {
                  fontSize: 10, //y轴字体大小
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#fff", //y轴颜色
                  width: 1, //y轴宽度
                },
              },
            },
            series: [
              {
                name: "预计收入",
                barMaxWidth: 20,
                data: list1,
                type: "bar",
                color: "rgb(91,212,175)",
              },
            ],
          };
          this.myChart.setOption(options, true);

          if (this.listX.length > 3) {
            this.setInter(x, list1);
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },

定时处理数据

    setInter(x, y1) {
      const that = this;
      const listX = x,
        listY1 = y1;
      this.chartTimer = setInterval(function () {
        if (that.page >= that.listX.length) {
          that.page = 0;
        }
        listX.shift();
        listY1.shift();
        listX.push(that.listX[that.page]);
        listY1.push(that.list1[that.page]);
        that.page++;
        that.myChart.setOption({
          xAxis: {
            data: listX,
          },
          series: [
            {
              name: "预计收入",
              barMaxWidth: 20,
              data: listY1,
              type: "bar",
              color: "rgb(91,212,175)",
            },
          ],
        });
      }, 3000);
    },