echarts - 如何动态更新echarts plot主题

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

  }