javascript - 如何以角度更新echarts

Question

这是代码：

HTML

 <div echarts [options]="alertsToday$ | async" (chartInit)="onChartInit(todayCharts.line, $event)"
                  [theme]="(darkMode$ | async) ? 'dark' : 'default'" style="max-height: 200px;"></div>

TS

  todayOptions = chartOptions.today;

  todayCharts: any = {
    line: { options: _.cloneDeep(this.todayOptions) }
  };

  constructor(private report: ReportService){}

  onChartInit(chart: object, instance: any) {
    chart['instance'] = instance;
    this.todayCharts.line['instance'].setOption(this.todayCharts.line.options);
  }

 getReports() {
    this.report.getStatusReports();
    this.report.alertsToday$.subscribe((data) => {
      this.alertsToday$.next(data);
      if (this.todayCharts.line['instance']) {
        this.todayCharts.line['instance'].setOption(data);
      }
  }

服务.TS

getStatusReports() {
    const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
    const reportModules = [
      { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
      {
        url: 'application-and-severity',
        params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
      },
      {
        url: 'application-and-severity-and-date',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      },
      {
        url: 'application-and-status',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      }
    ];
    const promises = reportModules.map(
      target =>
        new Promise(resolve => {
          this.notificationService
            .getSummary(target.url, target.params)
            .pipe(take(1))
            .subscribe(
              (result: Response) => {
                // console.log(target, result);
                resolve({ target, result });
              },
              (err: Error) => {
                // return reject(err);
              }
            );
        })
    );
    Promise.all(promises).then(results => {
      const options = chartOptions;
      options.default.today.series[0].itemStyle.normal.label.formatter = function (params: any) { return params.value + '%\n'; };
      const week = this.getWeek();

      // console.log(options.default);

      results.forEach((res: any) => {
        if (res.target.url !== '') {
          if (res.target.url === 'application-and-severity') {
            const todaySummary = { total: 0, data: [] as any };
            const groups = _.groupBy(res.result, (data: any) => data.severity);

            severities.forEach(severity => {
              const total = groups[severity]
                ? groups[severity].reduce((prev, curr) => ({ total: prev.total + curr.total }))
                : {
                  total: 0
                };

              todaySummary.data.push({
                name: severity,
                value: total.total
              });

              todaySummary.total += total.total;
            });

            options.default.today.title.text = todaySummary.total;
            options.default.today.series[0].data = todaySummary.data;
            // this.loading.today = false;
            return this.alertsToday$.next(options.default.today);
          }
    }
    });
    });
    }

我在这里尝试做的是更新 alertsToday 的图表。但是当我尝试使用 setOption 时它不起作用，我使用了onChartInit().

首先显示数据，但是当有新更新时，它不会重新加载/刷新或更新图表。

如何更新echarts？导致它加载第一个数据，然后当我更新数据时它不会更新 echarts 它仍然相同。

我有chart.component.html并且chart.component.ts还有report.serviceacknowledge.component.ts

标签： javascriptangulartypescriptecharts