vuejs 中图表的反应状态

Question

我的 vue 代码上有一个图表，其中包含 30days、7days、yesterday 的过滤器。

如果我单击任何此选项，我会获得时间戳的最小 Y 值，无论是 30 天、7 天还是昨天，并且我设置一个监视来监视 系列中的任何更改，以便它可以更新为当我过滤数据时，它不起作用或没有反应

数据/系列作为道具来

props: {
    series: {
      type: Array,
      required: true
    }
  }

手表块 所以现在在这个监视块中，this.minYSeries不会更新，并且在我需要根据我应用的时间戳和逻辑进行更改之前，它对于它收到的第一个值或数据是静态的。请参阅以下方法：

  watch: {
    series: {
      immediate: true,
      handler: function () {
        if (Array.isArray(this.series) && this.series.length > 0) {
          this.minYSeries = Math.min(...this.series.map((data) => data[1]));
          console.log("Watch triggered. New series data:", this.minYSeries);
          this.chartOptions.yaxis.min = this.minYSeries;
          if (this.$refs.chart) {
            this.$refs.chart.series = [{ data: this.series }];
          }
        }
      },
    },
    deep: true
  }

方法：

  methods: {
    async getPerformance() {
      if (this.series === null) return
      this.startingDate = this.series[0][0]
      this.chartOptions = {
        xaxis: {
          min: this.series[0][0]
        },

      }
      this.$refs.chart.series = [{ data: this.series }]
    },
    updateData: function (timeline) {
      this.selection = timeline;
      switch (timeline) {
        case "one_month":
          var oneMonthAgo = new Date();
          oneMonthAgo.setDate(oneMonthAgo.getDate() - 30);
          this.minYSeries = Math.min(...this.series.filter(data => data[0] >= oneMonthAgo.getTime()).map((data) => data[1]));
          console.log("oneMonthYseries", this.minYSeries);
          this.$refs.chart.zoomX(
            oneMonthAgo.getTime(),
            new Date().getTime()
          );
          break;
        case "one_week":
          var oneWeekAgo = new Date()
          oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
          this.minYSeries = Math.min(...this.series.filter(data => data[0] >= oneWeekAgo.getTime()).map((data) => data[1]));
          console.log("oneWeekYseries", this.minYSeries);
          this.$refs.chart.zoomX(
            oneWeekAgo.getTime(),
            new Date().getTime()
          );
          break;
        case "one_day":
          var yesterday = new Date()
          yesterday.setDate(yesterday.getDate() - 1)
           this.minYSeries = Math.min(...this.series.filter(data => data[0] >= yesterday.getTime()).map((data) => data[1]));
          console.log("yesterdayYseries", this.minYSeries);
          this.$refs.chart.zoomX(
            yesterday.getTime(),
            new Date().getTime(),
          );
          break;
        case "all":
          console.log("startingDate=", this.startingDate)
          this.$refs.chart.zoomX(
            this.startingDate,
            new Date().getTime()
          );
          break;
        default:
      }
    },
  }

因此，如果任何此 switch 情况为真，则 this.minYseries 应该会更改，但事实并非如此。

事实上，当每种情况下的 console.log() 为真时，我得到了正确的值，但手表块内的 minYseries 没有更新

安装：

  async mounted() {
    await this.getPerformance()
  }

Answer 1

如果您提供更多信息，我可以帮助您解决这个问题。 您可以在 Stackblitz 或 CodeSandbox 上进行最低限度的复制吗？