How to update the echarts plot theme dynamicaly

Can someone explain to me how to toggle from light to dark theme without reloading the page??

I have this code that checks if the theme is light or dark and I want to change the theme dynamically base on the theme.

my code so far

initECharts(days: any, hours: any, data: any) {

    if (this._chart) {
      this._chart.clear();
      this._chart = null;
    }

    // console.log('days: ', this.days);
    // console.log('hours: ', this.hours);
    // console.log('values: ', this.values);


    data = this.reconstructData(days, hours, data);

    // const x: any = document.getElementById('main');
    const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
    console.log('theme', theme);

    const domEl: any = this.main.nativeElement;
    this._chart = echarts.init(domEl, theme);

    // specify chart configuration item and data
    const option: any = {
      tooltip: {
        position: 'top'
      },
      animation: false,
      grid: {
        height: '50%',
        y: '10%'
      },
      xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
          show: true
        },
        nameTextStyle: {
          color: 'red'
        }
      },
      yAxis: {
        type: 'category',
        data: days,
        splitArea: {
          show: true
        }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
      },
      series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
          normal: {
            show: true
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    // use configuration item and data specified to show chart
    this._chart.setOption(option);

  }

Ok, I found it.

every time you want to update the theme dynamically example a button or an observable or Promise, you must call this method

echarts.dispose(this._chart);

then you call the initMethod, example:

this.initECharts();

The init method can look like this in my case.

initECharts(days: any, hours: any, data: any) {

    data = this.reconstructData(days, hours, data);

    // const x: any = document.getElementById('main');
    const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
    console.log('theme', theme);

    const domEl: any = this.main.nativeElement;
    this._chart = echarts.init(domEl, theme);

    // specify chart configuration item and data
    const option: any = {
      tooltip: {
        position: 'top'
      },
      animation: false,
      grid: {
        height: '50%',
        y: '10%'
      },
      xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
          show: true
        },
        nameTextStyle: {
          color: 'red'
        }
      },
      yAxis: {
        type: 'category',
        data: days,
        splitArea: {
          show: true
        }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
      },
      series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
          normal: {
            show: true
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    // use configuration item and data specified to show chart
    this._chart.setOption(option);

  }