ECharts饼图动态配置路由跳转时tooltip dispose报错求助

问题场景 #

使用ECharts饼图动态更新配置，核心代码如下：

var myChart = echarts.init(document.getElementById('chartId'));
myChart.setOption(this.chartOption , true)

路由跳转至其他页面时，触发如下报错：

TypeError: Cannot read properties of null (reading 'removeChild')
at TooltipContent.dispose (TooltipContent.js:352:24)

饼图配置项：

chartOption = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Topics',
      type: 'pie',
      data: [],
      color: ["#378AFF", "#FFA32F", "#F54F52", "#3D0C11", "#9552ea", "#93F03B", "#FF2E7E", "#7AC142", "#127C56", "#1B5583"],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

已尝试[merge]="dynamicData"结合this.dynamicData = { ... this.chartOption }的合并方式，但无效。需求是实现图表数据与配置的动态变更，同时解决该销毁报错。

报错原因 #

路由跳转时组件DOM已被销毁，但ECharts实例的Tooltip仍在尝试操作已不存在的DOM元素，触发空指针异常。

解决方案 #

1. 组件销毁时手动销毁ECharts实例

在组件的销毁生命周期钩子中（以Angular为例，对应ngOnDestroy），调用ECharts实例的dispose()方法，彻底清理实例资源与关联DOM：

import { Component, OnInit, OnDestroy } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-your-chart',
  templateUrl: './your-chart.component.html'
})
export class YourChartComponent implements OnInit, OnDestroy {
  myChart: echarts.ECharts | null = null;
  chartOption = { /* 你的配置项 */ };

  ngOnInit(): void {
    this.myChart = echarts.init(document.getElementById('chartId'));
    this.updateChart();
  }

  // 动态更新图表的方法
  updateChart() {
    if (this.myChart) {
      this.myChart.setOption(this.chartOption, true);
    }
  }

  ngOnDestroy(): void {
    if (this.myChart) {
      this.myChart.dispose(); // 销毁实例，清理所有关联资源
      this.myChart = null;
    }
  }
}

2. 优化setOption调用逻辑

若非必须，避免使用setOption的第二个参数true（强制替换配置），默认的合并模式能减少DOM操作冲突。若必须替换，先检查实例与DOM是否存在：

updateChart() {
  const chartDom = document.getElementById('chartId');
  if (this.myChart && chartDom) {
    this.myChart.setOption(this.chartOption, true);
  }
}

3. 先隐藏Tooltip再销毁实例

在销毁实例前，先手动隐藏Tooltip，确保其DOM操作完成后再延迟销毁实例：

ngOnDestroy(): void {
  if (this.myChart) {
    this.myChart.hideTip(); // 先隐藏Tooltip
    setTimeout(() => {
      this.myChart?.dispose();
      this.myChart = null;
    }, 100); // 短暂延迟确保Tooltip DOM处理完成
  }
}

验证效果 #

以上方案可确保组件销毁时ECharts实例被彻底清理，不会再尝试操作已移除的DOM元素，解决Tooltip销毁时的空指针报错，同时不影响图表数据与配置的动态更新需求。

内容的提问来源于stack exchange，提问作者Harsh Tukadiya