<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: ["-sharp3ba1ff"],
    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; iPP) {
        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;
  }

 

switching time selection data option changes but the chart is not redrawn