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，例如：

@JsonIgnoreProperties(ignoreUnknown = true)

在我的情况下，init方法看起来像这样。

this.initECharts();

如何动态更新echarts情节主题

1 个答案: