Блог

Может кто-нибудь объяснить мне, как переключиться со светлой темы на темную без перезагрузки страницы??

У меня есть этот код, который проверяет, является ли тема светлой или темной, и я хочу динамически изменять тему в зависимости от темы.

мой код до сих пор

 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);

  }
  

Хорошо, я нашел это.

каждый раз, когда вы хотите динамически обновлять тему, например, с помощью кнопки, наблюдаемого объекта или обещания, вы должны вызывать этот метод

echarts.dispose(это._ диаграмма);

затем вы вызываете initMethod, пример:

 this.initECharts();
  

Метод init в моем случае может выглядеть следующим образом.

 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);

  }