如何动态更新echarts情节主题

Question

有人可以向我解释如何在不重新加载页面的情况下从浅色主题切换到深色主题吗？

我有这段代码检查主题是浅色还是深色，我想根据主题动态更改主题。

到目前为止我的代码

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

  }

Answer 1

好的，我找到了。

每次你想动态更新主题例如按钮或可观察或Promise时，你必须调用此方法

echarts.dispose(this._chart);

然后调用 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);

  }