Angular 16中ECharts调用API后Restore选项失效问题求助

问题根源在于ECharts的Restore功能会将图表重置为初始传入的options配置，你初始的chartOption数据为空，而merge仅做动态数据合并，并未修改原始chartOption，因此恢复后会回到空数据状态。以下是三种可行解决方案：

方案1：直接更新原始chartOption（推荐） #

API返回数据后，直接修改chartOption中的数据部分，让初始配置与动态数据保持同步，这样Restore时会使用更新后的配置。

组件代码： #

// 初始配置（数据为空）
chartOption = {
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [] }],
  dataZoom: [{ type: 'inside' }, { type: 'slider' }]
};
isLoading = false;

fetchData() {
  this.isLoading = true;
  this.apiService.getData().subscribe(res => {
    // 解构合并，更新数据部分
    this.chartOption = {
      ...this.chartOption,
      xAxis: { ...this.chartOption.xAxis, data: res.xData },
      series: [{ ...this.chartOption.series[0], data: res.seriesData }]
    };
    this.isLoading = false;
  });
}

模板代码： #

移除[merge]属性，仅保留更新后的chartOption：

<div 
  echarts (chartInit)="onChartInit($event)" 
  (chartFinished)="chartFinished()" 
  [loading]="isLoading" 
  [options]="chartOption" 
  class="demo-chart">
</div>

方案2：监听Restore事件，重新加载数据 #

通过ECharts实例监听restore事件，触发时重新调用API获取数据并合并。

组件代码： #

private chartInstance: any;
dynamicData: any = {};
isLoading = false;

onChartInit(chart: any) {
  this.chartInstance = chart;
  // 监听Restore按钮点击事件
  this.chartInstance.on('restore', () => {
    this.fetchData();
  });
}

fetchData() {
  this.isLoading = true;
  this.apiService.getData().subscribe(res => {
    this.dynamicData = {
      xAxis: { data: res.xData },
      series: [{ data: res.seriesData }]
    };
    this.isLoading = false;
  });
}

模板代码： #

保持原有的[merge]配置即可：

<div 
  echarts (chartInit)="onChartInit($event)" 
  (chartFinished)="chartFinished()" 
  [loading]="isLoading" 
  [merge]="dynamicData" 
  [options]="chartOption" 
  class="demo-chart">
</div>

方案3：自定义Restore按钮，替换默认功能 #

隐藏ECharts默认的Restore按钮，自己实现仅重置缩放、不重置数据的按钮。

组件代码： #

private chartInstance: any;
chartOption = {
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [] }],
  dataZoom: [
    { type: 'inside', restore: { show: false } }, // 隐藏默认Restore
    { type: 'slider', restore: { show: false } }
  ]
};
dynamicData: any = {};
isLoading = false;

onChartInit(chart: any) {
  this.chartInstance = chart;
}

// 自定义重置缩放方法
resetZoom() {
  this.chartInstance.dispatchAction({
    type: 'dataZoom',
    dataZoomIndex: 0,
    start: 0,
    end: 100
  });
  this.chartInstance.dispatchAction({
    type: 'dataZoom',
    dataZoomIndex: 1,
    start: 0,
    end: 100
  });
}

fetchData() {
  this.isLoading = true;
  this.apiService.getData().subscribe(res => {
    this.dynamicData = {
      xAxis: { data: res.xData },
      series: [{ data: res.seriesData }]
    };
    this.isLoading = false;
  });
}

模板代码： #

添加自定义按钮，保留原图表配置：

<button (click)="resetZoom()">恢复缩放</button>
<div 
  echarts (chartInit)="onChartInit($event)" 
  (chartFinished)="chartFinished()" 
  [loading]="isLoading" 
  [merge]="dynamicData" 
  [options]="chartOption" 
  class="demo-chart">
</div>

内容的提问来源于stack exchange，提问作者eladr