eCharts 动态数据曲线时时变化

<template>
  <div class="content">
    <div class="tittle">
      <span> 标题 </span>
    </div>

    <div class="main" id="maina"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      myChart: undefined,
      timer: null,
    };
  },
  watch: {
    arr: function (one, old) {
      if (one !== old) {
        this.createEcharts();
      }
    },
  },
 props: {
    arr: {
      type: Array,
    },
  },
  methods: {
    createEcharts() {
      this.myChart = this.echarts.init(document.getElementById("maina"));
      var option = {
        grid: {
          top: 30,
          left: 70,
          right: 20,
          bottom: 35,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisLabel: {
            textStyle: {
              color: "#01B4FF",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0A156E",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位(με)",
          min: function (value) {
            return value.min;
          },
          nameTextStyle: {
            color: "#2BB6FF",
            fontSize: 12,
          },
          axisLabel: {
            textStyle: {
              color: "#01B4FF",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0A156E",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        series: [
          {
            data: this.list,
            type: "line",
            areaStyle: {},
            symbol: "none",
            smooth: true,
            lineStyle: {
              color: "#0090FF",
              width: 2,
            },
            itemStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0336FF",
                },
                {
                  offset: 1,
                  color: "rgba(0,144,255,0.1)",
                },
              ]),
            },
          },
        ],
      };

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
      // *********************重点代码********开始*****************     
      this.timer = setInterval(() => {
        this.list = [];
        this.arr.forEach((item) => {
          this.list.push(item);
        });
        this.myChart.setOption({
          series: [
            {
              data: this.list,
            },
          ],
        });
      }, 1000);
       // *********************重点代码********结束*****************
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 17px;
  width: 100%;
  height: 30%;
  background: url("../../assets/image/scienceBg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  .main {
    height: calc(100% - 43px);
    width: 100%;
    // border: 1px solid red;
  }
  .tittle {
    background: url("../../assets/image/title.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 43px;
    padding-top: 20px;
    // position: absolute;
    // left: 50%;
    // top: 0;
    // transform: translate(-50%);
    margin: 0 auto;
    text-align: center;
    line-height: 0px;
    position: relative;
    span {

      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #0096ff;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>