angular4 中使用echarts 放在tab中数据不显示 并且数据变化不能重新渲染

Question

  <nz-tab *ngFor="let item of tabs index as i" nzTitle="{{item.title}}" (nzSelect)="selectTab(item.index)">
      <div echarts [options]="options[item.index-1]" [loading]="showloading" class="chart"></div>
    </nz-tab>

export class TaskList {
  // 任务列表
  public taskList: any[] = [];
  // 用户权限 1 维修部 ;2 商务部;3 总经理
  private userRole: number = 1;
  private options: any[] ;
  // private options: any;
  private time: any = 1;
  private tabIndex: any = 1;
  private tabs: any[] = [{ title: '房间出租量', index: 1 }, { title: '停车位出租量', index: 2 }, { title: '广告位出租量', index: 3 }];

  constructor (private taskListService: TaskListService) {
    this.taskList = taskListService.getTaskList();
    this.options = [this.taskListService.getRentalsOption(1, this.time), this.taskListService.getRentalsOption(2, this.time), this.taskListService.getRentalsOption(3, this.time)];
  }

  public ngOnInit () {
  }
  // 选择时间id 1 本日;2 本周;3 本月;4本年
  public resetTime (time: any): void {
    this.time = time;
    this.resetOptions(this.tabIndex, this.time);
  }
  // 选择时间区间
  public resetTimeRegion (result: Date): void {
    console.log('onChange: ', result);
  }
  // 切换tab
  public selectTab (tabIndex: number): void {
    this.tabIndex = tabIndex;
    this.resetOptions(this.tabIndex, this.time);
  }
  // 重置charts options
  public resetOptions (tabIndex: number, time: any): void {
    this.options[(tabIndex - 1)] = this.taskListService.getRentalsOption(tabIndex, time);
    console.log(JSON.stringify(this.options[(this.tabIndex - 1)]));
 
  }
}

 public option: any = {
    color: ['#3ba1ff'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        // containLabel: true,
    },
    xAxis : [
        {
            type : 'category',
            data : [],
            axisTick: {
                alignWithLabel: true,
            },
        },
    ],
    yAxis : [
        {
            type : 'value',
        },
    ],
    series : [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [],
        },
    ],
    
  public getRentalsOption (tabIndex: number, time: any) {
    // 1 本日;2 本周;3 本月;4 本年 ;其他 时间区间
    if (typeof (time) != 'number') {
      this.option.xAxis[0].data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      this.option.series[0].data = [20, 20, 20, 334, 390, 330, 220];
    }
    if (time == 1 ) {
      this.option.xAxis[0].data = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
      this.option.series[0].data = [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200];
    }
    if (time == 2) {
      this.option.xAxis[0].data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      this.option.series[0].data = [20, 20, 20, 334, 390, 330, 220];
    }
    if (time == 3) {
      const len = this.commonMethod.mGetDate();
      const xAxis: string[] = [];
      for (let i = 0; i < len; i++) {
        xAxis.push((i + 1).toString());
      }
      this.option.xAxis[0].data = xAxis;
      this.option.series[0].data = [10, 52, 200, 334, 390, 10, 52, 200, 334, 390, 10, 52, 200, 334, 390, 10, 52, 200, 334, 390, 10, 52, 200, 334, 390, 10, 52, 200, 334, 390];
    }
    if (time == 4) {
      this.option.xAxis[0].data = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      this.option.series[0].data = [10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220];
    }
    return this.option;
  }

 

切换时间的选择数据option变化 但是图表没有重新绘制

Answer 1

因为option为引用类型数据，地址没变，所以被认为没有数据改变，resetOptions最后加一句试一下:
this.options= Object.assign({},this.options);