如何通过DOM容器id获取Apache ECharts实例并调用setOption更新图表

ECharts 本身提供了静态方法echarts.getInstanceByDom，可以直接通过容器DOM元素获取对应的ECharts实例，无需手动维护全局实例变量。

实现步骤 #

1. 初始化阶段正常调用echarts.init初始化所有图表即可，不需要额外存储实例变量：

// 初始化示例，不需要保存返回的实例
echarts.init(document.getElementById("echartId1"));
echarts.init(document.getElementById("echartId2"));
// 其他大量图表初始化逻辑...

2. 封装适配你需求的调用方法：

// 封装按选择器获取ECharts实例的方法
function getEchart(selector) {
  const targetDom = document.querySelector(selector);
  // 传入DOM元素获取对应实例，不存在则返回null
  return targetDom ? echarts.getInstanceByDom(targetDom) : null;
}

3. 按你期望的形式调用更新即可：

// 直接通过ID选择器获取实例并更新配置
getEchart("#echartId1")?.setOption(newOption);

注意事项 #

• 调用前可以加可选链?.做兼容，避免对应DOM不存在/未初始化过图表时报错
• 如果有销毁图表的场景，调用echarts.dispose(dom)后，getInstanceByDom会自动返回null，无需手动维护实例的生命周期状态
• 该方法支持ECharts 4.0及以上所有版本，无需额外引入插件

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