循环生成多条曲线，可单独刷新其中一个曲线，或者刷新所有曲线中的其中一条

1.效果图

2.源码

<页面1>

<template>
  <div class="Echarts">
    <div class="outbox">
      <div
        v-for="(item, index) in ComponentsDataArray"
        :key="index"
        class="itembox"
      >
        <component
          :is="item"
          :chartData="
            index === 0 ? ResAreaDemandStatisticData : TotalDataArray[index]
          "
        ></component>
      </div>
    </div>
  </div>
</template>
<script>
import UrlClass from "@/http/Urlclass";
import { debounce } from "@/utils";
import echartscomponents from "./echartscomponents";
import infoshowComponents from "./infoshowComponents";
export default {
  name: "waterEcharts",
  components: {
    echartscomponents,
    infoshowComponents,
  },
  data() {
    return {
      TotalDataArray: [],
      ComponentsDataArray: [],
      ResAreaDemandStatisticData: {},
       setintecharts: null,
    };
  },
  mounted() {
    let DateData = this.$moment(this.SelectTime).format("YYYY-MM-DD");
    this.getTimefun(DateData);
  },
  methods: {
    getTimefun(DateData) {
      this.getechaartsdata(DateData);
      this.AreaDemandStatisticData();
      this.setintecharts = setInterval(() => {
        var date = new Date();
        if (date.getMinutes() % 15 == 3) {
          this.getechaartsdata(DateData);
          this.AreaDemandStatisticData();
        }
      }, 60000);
      this.$once("hook:beforeDestroy", () => {
        console.log("清除定时器setintecharts");
        window.clearInterval(this.setintecharts);
        this.setintecharts = null;
      });
    },

    /* 获取曲线数据 */
    getechaartsdata(DateData) {
      this.$axios
        .post(
          UrlClass.axiosUrlRC2 + "AreaDemandForecastData",
          JSON.stringify({ Date: DateData }),
          { headers: { "Content-Type": "application/json;" } }
        )
        .then((res) => {
          console.log("%cgetechaartsdata", "color:pink", res);
          let colorlist = [
            "#9AFF9A",
            "#97FFFF",
            "#9370DB",
            "#B452CD",
            "#BDB76B",
            "#BCEE68",
            "#836FFF",
            "#C0FF3E",
            "#00FF7F",
            "#FF6A6A",
            "#FF00FF",
            "#9400D3",
            "#836FFF",
            "#E6A23C"
          ];
          let Resdata = JSON.parse(JSON.stringify(res.data));
          let TotalData = [];
          let ComponentsData = [];

          if (!!Resdata.length) {
            Resdata.map((ele, index) => {
              let LineColor=colorlist[index]
              let AreaName = ele.AreaName;
              let TimeNow = ele.TimeNow;
              let Time = [];
              let DemandActual = [];
              let DemandForecast = [];
              let DemandLastForecast = [];
              let lastTime=[]
              if (!!ele.DemandActual.length) {
                ele.DemandActual.map((el, i) => {
                  DemandActual.push(el.WaterDemand);
                });
              }
              if (!!ele.DemandForecast.length) {
                ele.DemandForecast.map((el, i) => {
                  DemandForecast.push(el.WaterDemand);
                  Time.push(el.Time);
                });
              }
              if (!!ele.DemandLastForecast.length) {
                ele.DemandLastForecast.map((el, i) => {
                  DemandLastForecast.push(el.WaterDemand);
                  lastTime.push(el.Time);
                });
              }
              TotalData.push({
                AreaName,
                TimeNow,
                Time,
                DemandActual,
                DemandForecast,
                DemandLastForecast,
                LineColor,
                lastTime
              });
              ComponentsData.push("echartscomponents");
            });
            ComponentsData.unshift("infoshowComponents");
            TotalData.unshift({});
            this.TotalDataArray = TotalData;
            this.ComponentsDataArray = ComponentsData;
            console.log("this.TotalDataArray", TotalData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /* 获取统计数据 */
    AreaDemandStatisticData() {
      this.$axios
        .post(UrlClass.axiosUrlRC2 + "AreaDemandStatisticData")
        .then((res) => {
          console.log("%cAreaDemandStatisticData", "color:green", res);
          this.ResAreaDemandStatisticData = JSON.parse(
            JSON.stringify(res.data)
          );
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.Echarts {
  width: 100%;
  //height: 100vh;
  background: linear-gradient(
    0deg,
    rgba(162, 161, 166, 1),
    rgba(217, 216, 221, 1)
  );
  .outbox {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(100% - 20px);
    .itembox {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      width: calc((100% - 16px) / 3);
      height: calc((100vh - 48px - 40px) / 5);
      background: linear-gradient(
        0deg,
        rgba(236, 236, 236, 1),
        rgba(255, 255, 255, 1)
      );
      border: 1px solid rgba(18, 33, 55, 1);
      box-sizing: border-box;
      position: relative;
      margin-bottom: 2px;
      margin-left: 5px;
    }
  }
}
</style>

<页面2>

<template>
  <div class="Echarts">
    <div class="SelectTimeOutbox">
      <span class="timeStyle">时间:</span>
      <el-date-picker
        v-model="SelectTime"
        type="date"
        placeholder="选择日期"
        :default-time="''"
        @change="Datechangefun"
      ></el-date-picker>
    </div>
    <div class="outbox">
      <div
        v-for="(item, index) in ComponentsDataArray"
        :key="index"
        class="itembox"
      >
        <component
          :is="item"
          :chartData="
            index === 0 ? ResAreaDemandStatisticData : TotalDataArray[index]
          "
          :LastchartData="index === 0 ? '' : LastTotalDataArray[index]"
        ></component>
      </div>
    </div>
  </div>
</template>
<script>
import UrlClass from "@/http/Urlclass";
import { debounce } from "@/utils";
import echartscomponents from "./echartscomponents";
import infoshowComponents from "./infoshowComponents";
export default {
  name: "waterEcharts",
  components: {
    echartscomponents,
    infoshowComponents,
  },
  data() {
    return {
      TotalDataArray: [],
      LastTotalDataArray: [],
      ComponentsDataArray: [],
      ResAreaDemandStatisticData: {},
      setintecharts: null,
      SelectTime: this.$moment().subtract(1, "days").format("YYYY-MM-DD"),
    };
  },
  mounted() {
    let DateData = this.$moment(this.SelectTime).format("YYYY-MM-DD");
    this.getTimefun(DateData);
  },
  methods: {
    Datechangefun(val) {
      let DateData = this.$moment(val).format("YYYY-MM-DD");
      this.AreaDemandLastForecastData(DateData);
    },
    getTimefun(DateData) {
      this.getechaartsdata(DateData);
      this.AreaDemandStatisticData();
      this.setintecharts = setInterval(() => {
        var date = new Date();
        if (date.getMinutes() % 15 == 3) {
          this.getechaartsdata(DateData);
          this.AreaDemandStatisticData();
        }
      }, 60000);
      this.$once("hook:beforeDestroy", () => {
        console.log("清除定时器setintecharts");
        window.clearInterval(this.setintecharts);
        this.setintecharts = null;
      });
    },

    /* 获取曲线数据 */
    getechaartsdata(DateData) {
      this.$axios
        .post(
          UrlClass.axiosUrlRC2 + "AreaDemandForecastData",
          JSON.stringify({ Date: DateData }),
          { headers: { "Content-Type": "application/json;" } }
        )
        .then((res) => {
          console.log("%cgetechaartsdata", "color:pink", res);
          let colorlist = [
            "#9AFF9A",
            "#97FFFF",
            "#9370DB",
            "#B452CD",
            "#BDB76B",
            "#BCEE68",
            "#836FFF",
            "#C0FF3E",
            "#00FF7F",
            "#FF6A6A",
            "#FF00FF",
            "#9400D3",
            "#836FFF",
            "#E6A23C",
          ];
          let Resdata = JSON.parse(JSON.stringify(res.data));
          let TotalData = [];
          let ComponentsData = [];

          if (!!Resdata.length) {
            Resdata.map((ele, index) => {
              let LineColor = colorlist[index];
              let AreaName = ele.AreaName;
              let TimeNow = ele.TimeNow;
              let Time = [];
              let DemandActual = [];
              let DemandForecast = [];
              let DemandLastForecast = [];
              let lastTime = [];
              if (!!ele.DemandActual.length) {
                ele.DemandActual.map((el, i) => {
                  DemandActual.push(el.WaterDemand);
                });
              }
              if (!!ele.DemandForecast.length) {
                ele.DemandForecast.map((el, i) => {
                  DemandForecast.push(el.WaterDemand);
                  Time.push(el.Time);
                });
              }
              if (!!ele.DemandLastForecast.length) {
                ele.DemandLastForecast.map((el, i) => {
                  DemandLastForecast.push(el.WaterDemand);
                  lastTime.push(el.Time);
                });
              }
              TotalData.push({
                AreaName,
                TimeNow,
                Time,
                DemandActual,
                DemandForecast,
                DemandLastForecast,
                LineColor,
                lastTime,
              });
              ComponentsData.push("echartscomponents");
            });
            ComponentsData.unshift("infoshowComponents");
            TotalData.unshift({});
            this.TotalDataArray = TotalData;
            this.ComponentsDataArray = ComponentsData;
            console.log("this.TotalDataArray", TotalData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /* 获取昨日曲线数据 */
    AreaDemandLastForecastData(DateData) {
      this.$axios
        .post(
          UrlClass.axiosUrlRC2 + "AreaDemandLastForecastData",
          JSON.stringify({ Date: DateData }),
          { headers: { "Content-Type": "application/json;" } }
        )
        .then((res) => {
          console.log("获取昨日曲线数据", res);

          let Resdata = JSON.parse(JSON.stringify(res.data));
          let LastTotalData = [];
          if (!!Resdata.length) {
            Resdata.map((ele, index) => {
              let AreaName = ele.AreaName;
              let Time = [];
              let DemandLastForecast = [];
              let lastTime = [];
              if (!!ele.DemandLastForecast.length) {
                ele.DemandLastForecast.map((el, i) => {
                  DemandLastForecast.push(el.WaterDemand);
                  lastTime.push(el.Time);
                });
              }
              LastTotalData.push({
                AreaName,
                DemandLastForecast,
                lastTime,
              });
            });
            LastTotalData.unshift({});
            this.LastTotalDataArray = LastTotalData;
            console.log("this.LastTotalDataArray", LastTotalData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /* 获取统计数据 */
    AreaDemandStatisticData() {
      this.$axios
        .post(UrlClass.axiosUrlRC2 + "AreaDemandStatisticData")
        .then((res) => {
          console.log("%cAreaDemandStatisticData", "color:green", res);
          this.ResAreaDemandStatisticData = JSON.parse(
            JSON.stringify(res.data)
          );
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.Echarts {
  width: 100%;
  //height: 100vh;
  background: linear-gradient(
    0deg,
    rgba(162, 161, 166, 1),
    rgba(217, 216, 221, 1)
  );
  position: relative;
  .SelectTimeOutbox {
    position: absolute;
    z-index: 1999;
    top: 192px;
    left: 440px;
    .timeStyle {
      color: #a9aeb4;
      font: normal 12px "微软雅黑";
      margin-right: 10px;
    }
    /deep/ .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 140px;
    }
    /deep/ .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      color: #a9aeb4;
      font: normal 12px "微软雅黑";
      height: 28px;
      line-height: 28px;
    }
    /deep/ .el-input__icon {
      height: 100%;
      width: 25px;
      text-align: center;
      transition: all 0.3s;
      line-height: 28px;
    }
  }
  .outbox {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(100% - 20px);
    .itembox {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      width: calc((100% - 16px) / 3);
      height: calc((100vh - 48px - 40px) / 5);
      background: linear-gradient(
        0deg,
        rgba(236, 236, 236, 1),
        rgba(255, 255, 255, 1)
      );
      border: 1px solid rgba(18, 33, 55, 1);
      box-sizing: border-box;
      position: relative;
      margin-bottom: 2px;
      margin-left: 5px;
    }
  }
}
</style>